我试图用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>
最佳答案
您不能在带有 layout="grid"的
p:panelGrid
中使用 colspan
。
如 Primefaces manual 中所述关于Rowspan 和 Colspan:
- Note that this approach does not support grid layout.
要实现您想要的目标,您应该:
- 设置列=“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% 的宽度。
您可以查看Primefaces展示关于Responsive Design和 Grid CSS
希望这有帮助。
附带问题:这个 panelGrid 是否位于 h:form
内?如果是,我认为您可以在第一个 p:column
中删除 h:form
。
关于java - Primefaces PanelGrid colSpan 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44813772/