Problems with table configuration in Primefaces

Asked

Viewed 453 times

6

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;

inserir a descrição da imagem aqui

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?

2 answers

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>
  • it was interesting to know this information, but still continues with the same problem.

  • in my worked, but without columnClasses="label, field", try to take in your.

  • all right, who good it worked on yours, but mine didn’t work, I tried it gives a clear, I’ve restarted the server Tomcat and nothing.

  • which version of the primefaces?

  • The version of is primefaces 3.5

  • should be why I tested on 5.2. You cannot update?

  • I just updated, but it didn’t resolve.

  • you changed the style="width: 90px;" that I put in the first column? You’ll probably have to put a higher value

Show 3 more comments

0

You can configure the CSS class you created:

.rotulo { width: 250px; text-align: right }
  • Not yet solved, the word Manufacturing Year is put in the same position.

  • I put width: 3050px; text-align: right; and nothing was moved

Browser other questions tagged

You are not signed in. Login or sign up in order to post.