List view expands vertically , is horizontal expand possible ?

1
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?
asked
5 answers
10

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.
answered
8

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.

answered
3

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'.

Example:

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

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

Jeroen

answered
0

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

answered
-1

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.

answered