Align rowEdit and other buttons on the same row in PrimeFaces

Question

Align rowEdit and other buttons on the same row in PrimeFaces

Navigation

#1 by (1 votes)

1

I'm having trouble where my dataTable has the editable property set to true . Allowing the edit of the line that the user selects.

Well, when putting a button to delete for example I'm in trouble that the edit button does not stay on the same line, giving a line break in it and leaving the two buttons at different levels.

AndthenIwouldliketoknowwhattodotobeabletoalign,IalreadytriedtoputapanelGridinsidebutthenrowEditorstopsworking.

Codebelow:

<p:dataTableid="vigenciaCorrente" editable="true"
    value="#{tabelaTaxaBean.pojo.vigenciaCorrente.faixas}"
    var="corrente" sortBy="prazoMinimo">

    <f:facet name="header">
        <div align="left">
            <p:outputLabel value="Vigência de " />
            <p:outputLabel
                value="#{tabelaTaxaBean.pojo.vigenciaCorrente.dataInicial}">
                <f:convertDateTime pattern="dd/MM/yyyy" />
            </p:outputLabel>
            <p:outputLabel value=" a "></p:outputLabel>
            <p:outputLabel
                value="#{tabelaTaxaBean.pojo.vigenciaCorrente.dataFinal}">
                <f:convertDateTime pattern="dd/MM/yyyy" />
            </p:outputLabel>
            <p:outputLabel value=" (vigência corrente)"></p:outputLabel>
        </div>
    </f:facet>

    <p:column headerText="Prazo (em meses)">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel
                    value="#{corrente.prazoMinimo} a #{corrente.prazoMaximo}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Prazo inicial"
                    value="#{corrente.prazoMinimo}" size="8" maxlength="3"
                    onkeypress="mascara(this, soNumeros)" required="true" />
                &nbsp;&nbsp;
                <p:inputText label="Prazo final"
                    value="#{corrente.prazoMaximo}" size="8" maxlength="3"
                    onkeypress="mascara(this, soNumeros)" required="true" />
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Taxa de juros">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.taxaJuros}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Taxa de juros"
                    value="#{corrente.taxaJuros}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6" required="true">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Taxa diferenciada para o banco/empresa">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.taxaDiferenciadaParaBanco}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Taxa diferenciada para o banco/empresa"
                    value="#{corrente.taxaDiferenciadaParaBanco}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Comissão">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.comissao}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Comissão" value="#{corrente.comissao}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6" required="true">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Complemento">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.complementoComissao}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Complemento"
                    value="#{corrente.complementoComissao}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Ação" style="width: 5%">
        <p:rowEditor />
        <p:commandButton update=":form:vigenciaCorrentePanel"
            process=":form:vigenciaCorrentePanel" title="Excluir"
            value="Excluir">
            <p:collector
                removeFrom="#{tabelaTaxaBean.pojo.vigenciaCorrente.faixas}"
                value="#{corrente}" />
        </p:commandButton>
    </p:column>

    <f:facet name="footer">
        <div align="right">
            <p:commandButton id="btnFaixaCorrente"
                process="btnFaixaCorrente" value="Adicionar faixa"
                update=":dialogAdicionarFaixa" oncomplete="dlgFaixa.show();">
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
        </div>
    </f:facet>

</p:dataTable>

html css jsf primefaces

asked by anonymous 29.07.2014 / 22:16

1 answer

Remove XNamespace in XElement c # Spacing Cross-browser in Mail Marketing

score 1 · Accepted Answer

First, make sure there is no line break in the cell in question and set a fixed width. Example of inline styles:

<p:column headerText="Ação" 
    style="width: 200px; white-space: nowrap;">

The <p:rowEditor> element generates a div in the final HTML. You should apply the following styles to it, to prevent div from occupying the entire line and its alignment in the center:

display: inline-block;
vertical-align: middle;

To put all this in pure CSS, you can define a class for the column with the styleClass attribute and then apply the styles with a CSS selector.

The styleClass stanza below defines the CSS class coluna-acao in the "Action" column:

<p:column headerText="Ação" styleClass="coluna-acao">

And the styles below in a tag or style file will do the "magic", not needing inline styles:

.coluna-acao {
    width: 200px; 
    white-space: nowrap; 
}
.coluna-acao div.ui-row-editor {
    display: inline-block;
    vertical-align: middle;
}

Let's look at what each line does. First there is the style to be applied in cells:

width: 200px : sets a fixed width for cells
white-space: nowrap : Prevents the space between cell elements (buttons) from causing a line break. This is also necessary because there is a CSS for div with the edit button with a after attribute that adds a character after div .

Then the style applied to the cell edit button, which actually stays inside a div tag:

display: inline-block : component div by default has its display attribute with block value, which means that it always breaks the line afterwards. We have changed the value so that the other button can continue on the same line.
vertical-align: middle : causes the components to be aligned horizontally to the center of each other.

Of course I had no way to test with your screen, so you probably need to adjust some values or styles according to your system.