p: panelGrid Layout Issue

Question

Как мне добиться макета, как показано ниже?

            First Name  [_________]                     Last Name [_________]

            Street      [_________] 

Я пробовал некоторые из

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

Но закончилось как показано ниже,

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

Ниже приведен код, который я пробовал

<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>          

Что я тоже пробовал

<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>  

Это также закончилось почти так же, как первый

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

Answer 1

Если вы хотите использовать эти columnClasses, вам нужно также включить право css. Простым решением без классов css будет установка ширины panelGrid до 100% и ширины столбцов до 25% или требуемого%.