Template Grid: Fixed Column Size?

0
Hello, Can a template grids columns be fixed in size? We have one with 5 columns. When it has 5+ items, each column is 20% of the total width. However, when just one column, it is 100% of the width. 2 is 50/50%, etc. The desired behavior is to have the column be 20% of the width no matter how many items are in the template grid. There was a previous post (https://community.mendix.com/link/questions/8892) which suggested using this fix: display: table-cell; However, it was for Mx5.18/19, and it has not worked for us on Mx7.13.1. Has anyone else experienced this/has a fix that works?
asked
2 answers
2

Every template grid item gets a class like: mx-name-index-0 & mx-name-index-1, you could use those classes to set an individual fixed width per item.

answered
2

Hi Jon,

We usually solve this with using some fun custom css and listviews.

The idea is to have a wrapper that is 100% width and has class "display flex"
The items in the wrapper can have soms styling that is width 20%.

This puts items next to each other, and if there are more it will create a row below.

You could also use flex-stretch and max-width 20%, sort of depends on what interaction you want to happen

.ap_fluidcontainer ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 30px;
  width: 100%;
    li.mx-listview-item{
      width:23.5%;
      margin-right: 1.5%;
      margin-bottom: 30px;
    }
}

 

answered