PrimefacesselectManyCheckbox布局在列中从上到下

任务：有一个带有selectMany复选框的面板，该面板有5列。选择框的值按升序排列，但它们在列中从左到右而不是从上到下显示。

使用：Primefaces代码：

当前屏幕：

[] a    [] b    [] c  

[] d    [] e    [] f

[] g    [] h    [] i

预期：

[] a    [] d    [] g  

[] b    [] e    [] h

[] c    [] f    [] i

Kukeltje.. 5

幸运的是，我们这里有CSS可以解救。展示柜中有一个网格布局示例

如果您查看生成html，您会看到类似

......

    

        

            

                

                    

                        
                    
                    

                        
                    
                
                Miami
            
            

                

                    

                        
                    
                    

                        
                    
                
                London
            
            

                

                    

                        
                    
                    

                        
                    
                
                Paris
            
        
        

        

    

是的，一台用在这里，但人们常常忘了，你可以重写与CSS现有元素的CSS，这样可以使table，tbody，tr和td被显示为“柔性”，而不是默认的显示值。只需使用下面的CSS即可。

table.ui-selectmanycheckbox, table.ui-selectmanycheckbox tbody ,table.ui-selectmanycheckbox tr, table.ui-selectmanycheckbox td{
    display: flex;
}

现在的诀窍是使用CSS flex-direction并分配row给tbody和column，tr这样

table.ui-selectmanycheckbox tbody{
    flex-direction: row;
}

table.ui-selectmanycheckbox tr{
    flex-direction: column;
}

结果如下：

如果只希望将其应用于一个选择，则向该组件添加一个显式类，并在选择器中使用它。

幸运的是，我们这里有CSS可以解救。展示柜中有一个网格布局示例

如果您查看生成html，您会看到类似

......

    

        

            

                

                    

                        
                    
                    

                        
                    
                
                Miami
            
            

                

                    

                        
                    
                    

                        
                    
                
                London
            
            

                

                    

                        
                    
                    

                        
                    
                
                Paris
            
        
        

        

    

是的，一台用在这里，但人们常常忘了，你可以重写与CSS现有元素的CSS，这样可以使table，tbody，tr和td被显示为“柔性”，而不是默认的显示值。只需使用下面的CSS即可。

table.ui-selectmanycheckbox, table.ui-selectmanycheckbox tbody ,table.ui-selectmanycheckbox tr, table.ui-selectmanycheckbox td{
    display: flex;
}

现在的诀窍是使用CSS flex-direction并分配row给tbody和column，tr这样

table.ui-selectmanycheckbox tbody{
    flex-direction: row;
}

table.ui-selectmanycheckbox tr{
    flex-direction: column;
}

结果如下：

如果只希望将其应用于一个选择，则向该组件添加一个显式类，并在选择器中使用它。