Primefaces PanelGrid colSpan错误

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

您不能在 p:panelGrid 中使用 colspan 和 layout="grid".
正如 Primefaces manual 关于 Rowspan 和 Colspan 所述：

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

要实现你想要的，你应该：

1. 设置列=“2”
2. 删除 p:row 和 colspan
3. 添加 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 的 Primefaces 展示

希望这会有所帮助。

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