p:panelGrid布局问题 [英] p:panelGrid Layout Issue

问题描述

如何实现如下所示的布局?

How can I achieve the layout as shown below?

            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[_________] 

推荐答案

如果要使用这些columnClasses，则还需要包括正确的CSS. 如果没有该CSS类，一个简单的解决方案就是将panelGrid的宽度设置为100％，将列的宽度设置为25％，或者不希望使用的％.

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

这篇关于p:panelGrid布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！