Properly Line Up ListView Header and Objects with/without CSS?

Hey guys, I’ve developed a few list views now and they always seem to end up a little… off. Even when I try and apply some in-line CSS I can’t quite get it right. I know Mendix utilizes Bootstrap as well, but I haven’t been able to properly use that to try and line things up nice and neat.  So, time to see what I’m talking about. This is what it looks like in the modeler: Here is what it looks like in the preview:   So, if you look closely, the headers don’t line up with the actual items in the listview. I’m wondering if there is a quick way to fix this so they match up nice and neat under each other (the details lining up horizontally under their respective headers). Again, I’ve tried playing the padding of containers and stuff, but nothing has really worked for me. I may be missing something, but that’s why I’m coming here! Thanks in advance :D
3 answers

From the image, it looks like the headers are in a layout grid that is inside a container. The list-view objects are then inside a layout grid, inside a container, inside a container, inside the listview itself. Each of these parts could potentially have styling on them.

You will probably need to style the listview itself to get the look that you want. I would suggest doing this adding some custom SASS to the theme folder.



A quick and dirty approach:

  • Remove the containers inside the Listview so that only the layout grid is inside the Listview
  • In the Listview properties, add class listview-stylingless to remove all Listview styling
  • Move the 'headers' out of the container they are in.  Also make them a standalone layout grid

Now you should be able to apply the same styling to the header layout grid and the

Listview layout grid and they should match up.

Hope that helps,



Your listview probably has the default padding left and right of 15px. Try to add these to the container with the header or make a default class for listview-header with this padding and add that. As a starting point for default classes check out Implement styles or Atlas documentation (the last one lacks the proper classes though so you need to inspect to element to get the right class...ughh..)