How To Use The Layout Grid Xmpro App Designer Toolbox

In this video, you’ll learn how to use the layout grid in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if...

Transcript

In this video, you’ll learn how to use the layout grid in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if... the layout grid allows you to subdivide

an area of your application into aligned

sections it can be used to provide

structure to the entire page or is the

table to organize similar information

into a presentable format to begin

locate the layout grid in the blocks tab

and drag it onto the page this will

create a 3x3 grid filling the available

space I'm going to add a gray box to

each of these cells just to make

visualizing them a little bit easier to

add columns select any cell and click

the plus button in a blue control bar

this will insert a column to the right

of the selected cell to delete columns

select any cell in that column and click

the trashcan button or press Delete on

your keyboard adding and removing rows

is very similar except the entire row

must be selected via the page layers tab

rather than individual cell if you don't

have the page layers tab open you can

select the cell and click the up button

to select the parent row any addition or

deletion of rows and columns will be

applied to the grid as a whole if an

unequal number of cells in each row or

column is desired the stacked layout

blocks can be nested in each other to

achieve this effect which is explained

in another video the rows and cells of a

layout grid can also accept styles which

are also explained in further detail in

another video there you have full

control over the applied styles it is

easy to unintentionally break the grid

by applying conflicting styles therefore

I recommend sticking to the dimensions

and typography sections unless you're

feeling adventurous the most notable

style it could be applied is the height

and width of each row and column while

most cells will update their row and

column with height and width values

different values in the same column or

row will override one another I

recommend using the cells in the top row

to set the width and applying the height

to the rows themselves otherwise you may

find yourself needing to hunt through

each individual cell looking for the one

you wish to edit

also note that cells can be arranged

within their own row but cannot be moved

outside it moving a cell with applied

styles to a column may change the

appearance of the grid so be certain you

know what you are moving

Rose can also be rearranged but not

taken outside of the grid

this has been a demonstration of the

layout grid an app designer thank you

for watching