In a fixed container you are free to drag and drop elements as you would in the old engine, all the alignment and spacing you do in this container is manual and if you use this layout, it would be tricky to get the responsiveness you need for the web application.
In the Row layout any element you place will take its position horizontally and align itself automatically to the previous element. This is particularly useful when you want to create a header or footer for your web application, where all the text, buttons, etc. need to be aligned next to each other.
While using a row layout, you can choose how to space the individual elements. You can choose left-aligned, centered, right-aligned, space around, and space between to get the look of the structure you want.
In the Container layout any element you place will take its position below or above the already placed element. This configuration can be useful when you are creating a sidebar for example and want all the elements to be aligned vertically.
Align to Parent:
Align to Parent gives you the freedom to place the elements in any nine positions. Align to parent is useful when you want to place elements at a particular position that cannot be achieved with a row or column layout.
Repeating groups also give us some new options in the new responsive engine. Repeating group cells can also be given the layout of fixed, row, column, and align to parent. In addition to this, you can fix the number of rows and columns you want in the repeating group. You can choose the scrolling option of the repeating group to be either vertical or horizontal.
A margin is a space that is around an element’s border. In the new responsive engine when we need to put some space between two elements we can achieve that space by adding proper margins between them. You can add margins to elements top, bottom, left, and right.
Padding is the space between an element’s border and its content. We can apply padding to an element’s inner content the same way we can add margins. We have options to add padding to the top, bottom, left, and right.
Widths & Heights:
A new way to set widths and heights in the new responsive engine is by using percentages instead of pixels like we normally do. We can make the element fixed in width and height if we want its size to remain the same on any screen size.
Example of Responsiveness:
To sum it all up here is an example of how to set up your groups for responsiveness.
1. First, we create a page and set its dimensions, you can choose whatever height and width you like, but make sure the page layout is set to the column.
4. Add a Text Element inside the subgroup and set its min width to 50px and min-height to 20px, check the fit width to the content option, and leave the max width and height to infinity. After this just copy and paste the sub-group to create a total of four subgroups inside the main group.
Chat with our team to see what we can do