Primefaces 响应式 <p:panelGrid> 无法使用 5 列

Question

让我们有一些简单的响应式 primefaces <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，似乎是 primefaces 在有 5 列时不添加 ui-grid-col class（而是添加 null）。

有什么想法吗？可能是 primefaces 错误或我遗漏了什么？

感谢您的帮助。

Answer 1

基本的 Primefaces 网格 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.GridLayoutUtilsclass 您可以看到允许的值：

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

Primefaces 响应式 <p:panelGrid> 无法使用 5 列

Primefaces responsive <p:panelGrid> not working with 5 columns

java

jsf

primefaces

jsf-2

responsive