[英]Primefaces responsive <p:panelGrid> not working with 5 columns
让我们有一些简单的响应素数<p:panelGrid>
包含2,3,4,5和6列(仅作为示例)
...
<p:panelGrid columns="4" layout="grid">
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
</p:panelGrid>
<p:panelGrid columns="5" layout="grid">
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
</p:panelGrid>
<p:panelGrid columns="6" layout="grid">
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
<h:outputText value="Column"/>
</p:panelGrid>
...
可能我错过了一些东西......但不知何故,特定5列panelGrid
的响应不正常。
这是一个截图:
看看html,似乎是当有5列时,primefaces不会添加ui-grid-col
类(而是添加null
)。
有任何想法吗? 也许是一个主要的错误或我错过了什么?
谢谢您的帮助。
基本的Primefaces Grid CSS( http://www.primefaces.org/showcase/ui/panel/grid.xhtml )由12列组成,可以组合在一起:
2列布局 - > 12/2 - > 6 + 6(= 12)
3列布局 - > 12/3 - > 4 + 4 + 4(= 12)
4列布局 - > 12/4 - > 3 + 3 + 3 + 3(= 12)
5列布局 - > 12/5 = 2.4(无整数值!)
因此,Primefaces无法呈现5列布局。 但它似乎很奇怪,它呈现一个null
值而不是一个空字符串。
查看org.primefaces.component.panelgrid.GridLayoutUtils
类,您可以看到允许的值:
private static final Map<Integer, String> COLUMN_MAP = new HashMap();
private GridLayoutUtils() {
}
public static String getColumnClass(int columns) {
return (String)COLUMN_MAP.get(Integer.valueOf(columns));
}
static {
COLUMN_MAP.put(Integer.valueOf(1), "ui-grid-col-12");
COLUMN_MAP.put(Integer.valueOf(2), "ui-grid-col-6");
COLUMN_MAP.put(Integer.valueOf(3), "ui-grid-col-4");
COLUMN_MAP.put(Integer.valueOf(4), "ui-grid-col-3");
COLUMN_MAP.put(Integer.valueOf(6), "ui-grid-col-2");
COLUMN_MAP.put(Integer.valueOf(12), "ui-grid-col-1");
}
因此,您可以使用以下值: 1,2,3,4,6,12
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.