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 和 layout="grid".
中使用 colspan 正如 Primefaces manual 中关于 Rowspan 和 Colspan 所述：

Note that this approach does not support grid layout.

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

设置列=“2”
删除 p:row 和 colspan
添加列类="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 and Grid CSS

的 Primefaces 展示

希望这对您有所帮助。

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

中的 h:form

Primefaces PanelGrid colSpan 错误

Primefaces PanelGrid colSpan error

java

xhtml

primefaces

responsive-design