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

您不能在带有 layout="grid"的 p:panelGrid 中使用 colspan。
如 Primefaces manual 中所述关于Rowspan 和 Colspan:

• Note that this approach does not support grid layout.

要实现您想要的目标，您应该:

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% 的宽度。
您可以查看Primefaces展示关于Responsive Design和 Grid CSS

希望这有帮助。

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