Question

我试图将页面的主体与primefaces分开，以便它具有响应性。问题是它不尊重我指出的列。我见过其他碰巧遇到类似事情的人，但我发现我的代码中没有错。

有人能帮助我吗？

非常感谢您提前

  <p:panelGrid columns="4" layout="grid" style="width:100%;">
            <p:row>
                <p:column colspan="3">
                    <h:form>
                        cosas muy randomosas que tiene que usar el 75%
                    </h:form>
                </p:column>
                <p:column colspan="1">
                    <p:panelGrid columns="2">
                        <h:outputLabel for="username" value="Username:" />
                        <p:inputText id="username" value="#{userLogin.username}"
                            required="true" label="username" />
                        <h:outputLabel for="password" value="Password:" />
                        <p:password id="password" value="#{userLogin.password}"
                            required="true" label="password" />

                        <f:facet name="footer">
                            <p:commandButton value="Login" actionListener="#{userLogin.login}" />
                        </f:facet>
                    </p:panelGrid>
                </p:column>
            </p:row>
        </p:panelGrid>

Answer 1

您无法在colspan p:panelGrid中使用layout="grid". 如Primefaces manual中所述 Rowspan和Colspan ：

请注意，此方法不支持网格布局。

要实现您的目标，您应该：

set columns =“2”
删除p：row和colspan
添加columnClasses =“ui-grid-col-9，ui-grid-col-3”

你的代码应该是这样的：

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-9,ui-grid-col-3">
    <p:column>
       <cosas muy randomosas que tiene que usar el 75%
    </p:column>
    <p:column>
        <p:panelGrid columns="2">
            <h:outputLabel for="username" value="Username:" />
            <p:inputText id="username" value="#{userLogin.username}"
                required="true" label="username" />
            <h:outputLabel for="password" value="Password:" />
            <p:password id="password" value="#{userLogin.password}"
                required="true" label="password" />

            <f:facet name="footer">
                <p:commandButton value="Login"
                    actionListener="#{userLogin.login}" />
            </f:facet>
        </p:panelGrid>
    </p:column>
</p:panelGrid>

columnClasses="ui-grid-col-9,ui-grid-col-3"会使您的列宽度达到75％和25％。
您可以查看关于Responsive Design和Grid CSS

希望这有帮助。

附带问题：这个panelGrid是否在h:form内？如果是，我认为您可以在第一个h:form内删除p:column。

Primefaces PanelGrid colSpan错误

1 个答案: