Problems with table configuration in Primefaces

Question

Greetings to you all, I’m new as a Java programmer, and I’m having difficulty setting some things in the table for lack of experience, note the image;

As you can see the field Manufacturing year is poorly placed, it is like this;

Ano de
Fabrica

And it really should be like this;

Ano de Fabrica

This is my XHTML page

        <div class="left-sidebar">
            <p:panelGrid columns="2" id="painel1"
                style="width: 50%; margin-top: 20px" columnClasses="rotulo, campo">

                <p:outputLabel value="Tipo" for="tipo" />
                <p:selectOneMenu id="tipo">
                    <f:selectItem itemLabel="Selecione o tipo" />
                </p:selectOneMenu>

            <p:outputLabel value="Marca" for="marca" />
                <p:selectOneMenu id="marca">
                    <f:selectItem itemLabel="Selecione a marca" />
                </p:selectOneMenu>

            <p:outputLabel value="Modelo" for="modelo" />
                <p:selectOneMenu id="modelo">
                    <f:selectItem itemLabel="Selecione o modelo" />
                </p:selectOneMenu>

                <p:outputLabel value="Preço" for="preco" />
                <p:inputText id="preco" size="20" maxlength="20" />

                <p:outputLabel value="Tamanho" for="tamanho" />
                <p:inputText id="tamanho" size="20" maxlength="20" />

                <p:outputLabel value="Tripulação" for="tripulacao" />
                <p:inputText id="tripulacao" size="20" maxlength="20" />


                <p:outputLabel value="Ano de Fabrica" for="anofabrica" />
                <p:inputText id="anofabrica" size="20" maxlength="20" />

            </p:panelGrid>

        </div>

How do I make the changes?

Answer 1

Try the following, I always recommend to use <p:row> and <p:column> in the <p:panelGrid>, if you want to change the size of the Labels column change the width in the first <p:column>. Follows the code:

 <p:panelGrid id="painel1"
                 style="width: 50%; margin-top: 20px">

        <p:row>
            <p:column style="width: 90px;">
                <p:outputLabel value="Tipo" for="tipo" />
            </p:column>
            <p:column>
                <p:selectOneMenu id="tipo">
                    <f:selectItem itemLabel="Selecione o tipo" />
                </p:selectOneMenu>
            </p:column>
        </p:row>

        <p:row>
            <p:column>
                <p:outputLabel value="Marca" for="marca" />
            </p:column>
            <p:column>
                <p:selectOneMenu id="marca">
                    <f:selectItem itemLabel="Selecione a marca" />
                </p:selectOneMenu>
            </p:column>
        </p:row>

        <p:row>
            <p:column>
                <p:outputLabel value="Modelo" for="modelo" />
            </p:column>
            <p:column>
                <p:selectOneMenu id="modelo">
                    <f:selectItem itemLabel="Selecione o modelo" />
                </p:selectOneMenu>
            </p:column>
        </p:row>

        <p:row>
            <p:column>
                <p:outputLabel value="Preço" for="preco" />
            </p:column>
            <p:column>
                <p:inputText id="preco" size="20" maxlength="20" />
            </p:column>
        </p:row>

        <p:row>
            <p:column>
                <p:outputLabel value="Tamanho" for="tamanho" />
            </p:column>
            <p:column>
                <p:inputText id="tamanho" size="20" maxlength="20" />
            </p:column>
        </p:row>

        <p:row>
            <p:column>
                <p:outputLabel value="Tripulação" for="tripulacao" />
            </p:column>
            <p:column>
                <p:inputText id="tripulacao" size="20" maxlength="20" />
            </p:column>
        </p:row>
        <p:row>
            <p:column>
                <p:outputLabel value="Ano de Fabrica" for="anofabrica" />

            </p:column>
            <p:column>
                <p:inputText id="anofabrica" size="20" maxlength="20" />
            </p:column>
        </p:row>
    </p:panelGrid>

Answer 2

You can configure the CSS class you created:

.rotulo { width: 250px; text-align: right }