Hey Ionic Devs. After UX-testing the tab navigation and side-menu (which work perfectly) I decided to go for a matrix/grid-style menu (see image Vectra, branding by Michal Galubinski). In my case it is a 2x4 matrix.
I am using divs with class row and col which place the items evenly horizontally. But how would you give them the correct vertical size (something like view-size/4) so that they fill up the whole view?
Thanks a lot
1 Like
Flexbox is your friend. Example (not mine).
Check out this article and see how it was done https://css-tricks.com/boxes-fill-height-dont-squish/ or just read the code on the codepen example.
3 Likes
Thanks for your advice @joseadrian. I still wasn’t able to get the desired result. So I skipped the Ionic Grid and used my own divs (for the container, the rows and columns). In my CSS I assigned them to be table elements. Another positive side effect: No problems with different browsers. Haven’t found any negatives yet…
.box-container {
display: table;
height: 100%;
width: 100%;
}
.box-row {
display: table-row;
}
.box-col {
display: table-cell;
padding: 0px !important;
border: thin dashed black;
text-align: center;
vertical-align: middle;
}
I think you need to apply flexbox to the container, the row and the cell.
2 Likes
Hi,
unfortunately It’s not working on Safari, then not working on IOS.
Hi Jose,
I really liked your codepen example, and I adopted it for my app. I’ve noticed that is a flat grid. Is it possible to make it scrollable as you add more row into it? Well I know is do-able. have you got any examples to that, which can help me?