How to vertically centre a data picker within a table

0
Hi everyone, I’ve been trying for the past hour to vertically centre a date picker that I’ve got within a table cell so it matches up with the rest of the page. Has anyone managed to do this within CSS as I’m stumped at the moment. As you can see in the image above the sign button and the data picker aren’t aligned centrally with the radio button and text box and I can’t for the life of me figure out why it doesn’t work the same   
asked
2 answers
0

Nathan,

One thought:  you could add some space to the top of the middle two elements (I think they are a text and a boolean).  Atlas UI offers some standard classes like spacing-outer-top, spacing-outer-top-medium, etc.  You can see all of these helpers here:  https://atlas.mendix.com/p/helpers/7881299347899271

Hope that helps,

Mike

answered
0

Hi Nathan,

Do you mean with table cell that all the elements are inside the same <td> element? In that case, you could try adding vertical-align: middle; as style. 

Vertical alignment in tables can be tough, that is why Mendix switched to layoutgrid (probably not the only reason), which use flexbox. Rows and colums in layoutgrid can be centered vertically (https://docs.mendix.com/refguide/layout-grid#row-general and https://docs.mendix.com/refguide/layout-grid#4-2-3-align-vertically). 

If you want to keep using tables, you could also wrap the elements inside your table cell in a container and give the container the class ‘row-left’ (or row-center or row-right), which makes the container into a flexbox aligning the inside elements vertically in a row. They are also in the helper files mentioned by Mike.

Cheers.

answered