Primefaces响应<p:panelgrid>不使用5列

时间:2017-01-26 14:31:43

标签: java jsf primefaces jsf-2 responsive

让我们有一些简单的响应素数<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的响应不正常。

以下是截图:

enter image description here

查看html,似乎是当有5列时,primefaces不会添加ui-grid-col类(正在添加null)。

enter image description here

有什么想法吗?也许是一个主要的错误或者我错过了什么?

感谢您的帮助。

1 个答案:

答案 0 :(得分:3)

基本的Primefaces网格CSS(http://www.primefaces.org/showcase/ui/panel/grid.xhtml)由12列组成,可以组合在一起:

2列布局 - &gt; 12/2 - &gt; 6 + 6(= 12)

3列布局 - &gt; 12/3 - &gt; 4 + 4 + 4(= 12)

4列布局 - &gt; 12/4 - &gt; 3 + 3 + 3 + 3(= 12)

5列布局 - &gt; 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