Tutorial n°4 : Create and use Grids

Step 7: Center elements in your grid #2

If you want to vertically align column content in your Grid, here is what you have to do :

First you will have to put the grid height back to 100% (red border) and put the grid row height back to 100% (blue border) in the properties.
Then, in the grid row properties, change the Alignment to "ion-align-items-center". You can see that the columns are centered in the available space of the row.

When you add content to a column, the "cell" takes up more space in the Grid Row and all the columns continue to be centered between them. To be sure, let's add something in a cell.

To do so, search for "Generic Item" in the palette, and the objective is to drag & drop it in the cell number 4. But something is wrong... You can't see precisely where to put it.
To clarify, click the "show all grid or current selected" icon to disable it (the bottom icon in the Visual App Viewer) and click the "Remove highlight" to remove the current selection (the fifth icon starting from the top on the left on the Visual App Viewer).
Now Drag & Drop again your Generic Item in the cell 4 : You can see which element is targeted!

Choose "after" when you drag & drop it, then do it 3 times but choose "inside" for the second and "before" for the third.

Then show the grid borders again (show all grid or current selected). Modify the Alignment property of the grid row on "ion-align-items-end" to show that the columns align at the bottom.
This tutorial is now completed. If you want to go further on how to use other grid properties, have a look at the Convertigo documentation :
Access Convertigo Grid Documentation

Success !

You successfully completed this step, please click the Next Step button to go to next tutorial step
Close
You did not complete all the actions required in this step, are you sure you want to go to the next step ?