List view Horizontal layout

0
Hi, I want to know there is any method we can use to display listing view in horizontal instead vertical like usual? I don’t want it align up to down, I want the list in left to right because my attributes only one. Thanks,    
asked
4 answers
7

Hi Muhammad,

 

There are multiple ways to make your listview display horizontal. You can add the class lv-col-sm-4 to your listview and view the results. You can change the size and number of the columns. This class gives you 4 horizontal items.

 

Hope this helps!

answered
1

You can, but you need a widget to set classes on the list items, which aren’t available in the modeler. You can set classes on the listview itself and your content inside, but not the main item container (the html li element). The gallery widget, available in the Data widgets module for Mendix 9, does have this option.

 

For Mx 8, get widget Attribute Helper and put it in your listview to set e.g. attribute “data-customclass” to a certain (dynamic) value, and in the selector tab for this widget point to the parent li element. Then in your styling, you can display your list items as inline-blocks and give them a specific width based on the data-customclass value.

 

Edit: if you don’t need dynamic widths, then Daryls answer is the easier option obviously.

answered
1

For anyone else who comes looking, the simplest and best solution I found was a custom class "horizontalList" on the listview with the following definition in _custom-listview.scss: 

   .mx-listview.horizontalList > ul

   {

   display: inline-flex;

   }

answered
0

simply select your list view widget, go to properties>styling, and enter lv-col-xs-4 into the Class field. Mess around with the integer at the end...

answered