Responsive number of columns in template grids

0
Is it possible to change the number of columns in a template grid, depending on the size of the device? We currently have a template grid layout for our dashboard, in which every item is in a table with a width of 120px. The number of columns is defined as 5. When we try to approach the app on an IPad, some of the grid items just fall off screen rather than rescaling to fit the screen again.
asked
2 answers
5

Hi,

 

A template grid cannot do that, but a listview can. With CSS of course. Wrap your list view item content in a container and give it a meaningful class name. In your CSS, make sure the class has a fixed width.

 

Use CSS flex box (https://www.w3schools.com/css/css3_flexbox.asp) to make the listview responsive. Depending on the browser width, the items will fill up rows as much as possible. I'm at a different machine now, but if you need I can find you an example later.

I'm not sure whether you now use a template grid or a table or both. If your dashboard is data driven and you use a template grid then you can use a styled listview instead.

If you now have a table, replace that with containers with a fixed width and put them in a container styled as flex box. That will give you a responsive dashboard.

 

Edit:

 

In your theme, add the following:

.listview-flex .mx-listview-list {
    display: -webkit-flex;
    display: flex;
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
}

 

Then use listview-flex as a class on the listview. You could also combine with any of the other listview classes as described on https://ux.mendix.com/

 

Your listview should have a container, which is styled with a fixed height and width so the flex container can do its job. Place your content in that container.

 

Usage for your dashboard is pretty much the same. Place a container on your page and style it with the same CSS properties as in the class described here.

In that container, place containers for each dashboard item, make sure these have a fixed width and height.

answered
1

My suggestion would be to redesign you page with the responsive layout as basis. By setting the with of the columns on 120 px instead of a percentage you get these kinds of problems.

Regards,

Ronald

 

answered