Aligns in the same row rowEdit and other buttons in Primefaces

Question

I’m in trouble where mine dataTable owns the property editable set to true. Allowing editing of the line the user selects.

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

And then I’d like to know what to do so I can line up, I’ve tried to put in a panelGrid but there the rowEditor crashing.

Code below:

<p:dataTable id="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>

Answer 1

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

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

The element <p:rowEditor> generates a div in the final HTML. You should apply the following styles to prevent the div occupy the whole line and its alignment is in the center:

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

To put all this into pure CSS, you can set a class for the column with the attribute styleClass and then apply the ethyls with a CSS selector.

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

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

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

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

Let’s analyze what makes each line. 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 the div with the edit button with an attribute after adding a character after div.

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

• display: inline-block: the Component div by default has its attribute display with the value block, which means it always breaks the line after. We change the value so that the other button can continue on the same line.
• vertical-align: middle: makes the components align horizontally to each other’s center.

Of course I had no way to test with your screen, so it will probably be necessary to adjust some values or styles according to your system.