List view expands vertically , is horizontal expand possible ?

I am using list view to display Date and few quantity associated for that date, the requirement is to show quantities below the date. I arranged the column in table to get the desired view but the problem with list view i am facing is that it expands vertically (add rows below) and i want it horizontally( in columns) How can it be achieved?
5 answers

To set 2 items horizontal you can add the class lv-col-md-6 to the listview.

3 items in the row : lv-col-md-4

4 items in the row : lv-col-md-3  etc.


I think there would be two clean CSS solutions for this (float is not really meant for this i.m.o. and can cause unwanted behavior):

  1. Flexbox, as described by Fabian
  2. Add 'display: inline-block' on all list view items (and optionally to the 'load more' button. The list view will then be seen as a line that contains in-line elements.

Hi Rohit,

In a recent project, we solved this challenge with css. If you apply float:left to your listview items, the new items will appear next to the previous item. Note that a new row will be used when your screen is 'full'.


  width: 100%;
  .mx-listview-item {
    float: left;

Hopefully this solves your problem. If you have any further questions, please let us know.



For example: If you want to display the columns as shown below...You can use Layout Grid inside the list view instead of table.


Use the nested Layout Grid to split the space horizontally. Then move the fields in the list view into the Layout Grids.

No need to use CSS.