p:panelGrid Layout Issue

问题

How can I achieve the layout as shown below?

            First Name  [_________]                     Last Name [_________]

            Street      [_________]

I tried some from

https://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

But ended up as below,

First Name[_______]Last Name[_________]
Street[_________]

Below is the code that I have tried

<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="p-align-baseline ui-fluid">
<p:outputLabel for="First Name" value="First Name" />
<p:inputText id="First Name" />

<p:outputLabel for="Last Name" value="Last Name" />
<p:inputText id="Last Name" />

<p:outputLabel for="Street" value="Street" />
<p:inputText id="Street" />

</p:panelGrid>

What I have also Tried

<h:panelGrid columns="4"  styleClass="panelNoBorder">


        <p:row>
            <p:column><p:outputLabel value="First Name" /></p:column>
            <p:column>
                <p:inputText id="First Name"
                        value="#{First Name}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>
            </p:column>

            <p:column><p:outputLabel value="Last Name" />   </p:column>
            <p:column>
                <p:inputText id="Last Name"
                        value="#{Last Name}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>  
            </p:column>
        </p:row>

        <p:row>
            <p:column><p:outputLabel value="Street" /></p:column>
            <p:column>
                <p:inputText id="Street"
                        value="#{Street}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>
            </p:column>

        </p:row>            

</h:panelGrid>

This also ended almost similar to the first

First Name[_______]Last Name[_________]
Street[_________]

回答1:

If you want to use these columnClasses, you need to include also the right css. A simple solution, without that css classes, will be setting the width of the panelGrid to 100% and the width of columns to 25%, or the desidered %.

来源：https://stackoverflow.com/questions/60104885/ppanelgrid-layout-issue

标签

css

user-interface

jsf

primefaces