Dataview same height columns?

0
Hi everyone. I have a dataview which displays three columns but they autofit their heights according to their content. I want the three of them to have the same height even if one of the columns has a smaller content than its sibling column content. Anyone has an idea that could help me?
asked
3 answers
0

Try wrapping the columns in a container and make sure that container gets "display: flex" as styling. You can put that in the "style" area in the appearance tab to check if it works. Since this is against best practices, you should create a class for it in your scss files like Bootstrap 4 does (Mendix is still on 3):

.d-flex {
    display: flex;
}

And then put "d-flex" class on the container. More about flexbox here.

answered
0

Thanks for the help, but that didn't worked for me, my columns remained fitting their heights to their content individually.

What I did at the end was, in a separate .scss partial file, I created a class for the container that contains the template grid, see all the classes nested and apply a fixed height value and an overflow auto at the class named mx-dataview, at least in that way the columns will always have a fixed height, and if one of them needs to be higher then you can scroll through it.

.some-custom-name-for-the-container { /* Custom name for the container */
    .mx-templategrid-row {
        .mx-templategrid-item{
            .mx-dataview {
                height: 500px; /* This height depends on you */
                overflow: auto;
                .mx-dataview-content{
                }
            }
        }
    }
}

 

answered
0

Flexbox is not the right solution as it is not aware of other dimensions when aligning content.
In your case you can use the old style table or a css grid. For more information on the latter check the blog post
https://www.notion.so/gajduk/The-road-to-responsive-tables-in-Mendix-f8a1de4595634167bd489c48b565fbe1

 

answered