I want to implement list-view as tiles side by side

0
I am working on list-view and it displays record one below another like –   I want to display this two items side by side. How to do so ?  
asked
6 answers
7

You can easily add these AtlasUi classes for that

lv-col-xs-6

where xs is the responsive target size

and 6 is the number of bootstrap columns for each element (i.e. 6/12 = 50%)

regards, Fabian

answered
6

Im sure this has been asked before, so heres what you’re going to want to do.

put this class on your list view “card-container-fluid4”
and add this to your sass.

.card-container-fluid4 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
    li.mx-listview-item{
      width:23.5%;
      margin-right: 1.5%;
    }
}

it turns the listview into a “fluid wrapper” and will give your listview-items a set width, so that they will slide in next to each other.

(also work nice when creating a homepage with different cards with conditional visiablity per user that slides in next to each other)

answered
1

You need to change the sizing of the elements in the list by css styling. You can do this directly in the css option on the list element or by creating a css class in less and use them in the list object.

answered
1

A listview always displays the results in this way. If you want to have some results side by side you may want to use a templategrid.

answered
1

by default a listview only offers one column. 

You could use the TemplateGrid instead in this widget you can set the number of columns,  though you will get paging buttons in the TemplateGrid instead of the “load more” functionality you get in a ListView. 

answered
0

You can add the following css to your listview:

display: block;
width: 50%;
float: left;

 

Or make a class using scss and add the class to the listview ofcourse.

answered