Problems with configuring tables in PrimeFaces

6

Greeting for everyone, I'm new as a Java programmer, and I'm having trouble setting up some things in the table for lack of experience, look at the image;

Asyoucansee,theYearofmanufacturefieldisbadlyplaced,itlookslikethis;

AnodeFabrica

Anditshouldindeedbeso;

AnodeFabrica

ThisismyXHTMLpage

<divclass="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?

    
asked by anonymous 22.07.2015 / 01:11

2 answers

1

Try the following, I always recommend using <p:row> and <p:column> in <p:panelGrid> , if you want to change the size of the Labels column, change the width in the first <p:column> . Here is 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>
    
22.07.2015 / 14:59
0

You can configure the CSS class that you have created:

.rotulo { width: 250px; text-align: right }
    
22.07.2015 / 04:19