Changing component widths

• Column grid: Eximee Designer bases the form layout on a column grid. Each application page has a fixed number of columns (10 columns by default) allocated for components. The number of form columns is set when creating the template and each newly added page inherits this value.

• Sections and column layout: Section component by default inherits the number of page columns, but you can set for it its own number of columns. This means that if a page has, for example, 10 columns, a chosen section can have, for example, 16 columns — inside such a section components will arrange themselves in a finer grid, giving greater layout flexibility.

• Component width: Each component can occupy from one column up to the full width (all columns) in its section/page. The component width (in number of columns) can be changed directly in the editor — in edit mode grab the component by its right or left edge and drag to expand or shrink the element. While dragging, a green shadow appears showing the new component size and a number in the center of the component indicating how many columns it will occupy after release. The current component width (in columns) is also visible in the given component's properties, in the Styling.

• Layout flexibility: The number of layout columns can be increased if needed — new columns will be added to the right side of the form. Decreasing the number of columns is also possible, however before reducing this value you should first shrink the components on the page/section so that none occupies more columns than the new planned width. This keeps the layout consistent and prevents components from "falling" outside the new grid size.

Examples

• Expanding a component to more columns: In edit mode hover over the component, grab its right or left edge and dragto increase its width. While dragging the component you will see a green highlighted area indicating the new size and the number of columns the component will occupy. After releasing the mouse button the component will be expanded to the new width.

• Two components in one row: To place two components side by side in the same row, make sure the first one does not occupy the full width of the page/section. Drag its edge, decreasing the width so as to leave free columns in the row. Then add (or move) the second component — if the sum of the widths of both elements does not exceed the total number of columns, the second component will position itself next to the first in one row. For example: for a 10-column layout two components with a width of 5 columns each will together fill the entire row.

• Setting a component to full width: If you want a component to occupy the entire width of the section or page, expand it to the maximum number of columns. This can be done by dragging the component's edge to the end of the row (to the full width of the container) or by entering the target number of columns in the component's properties (the Number of columns field in the Stylingsection). A component set to full width will occupy all columns available in that row.

Frequently Asked Questions (FAQ)

• How many columns does a standard page have? By default a newly created form (application) is divided into 10 columns — this value can be changed when creating the template. If not changed, all application pages will use this default number of columns.

• What is the difference between a section layout and a page layout? Page has a globally set number of columns (common for the entire page). Section is a container component inside the page — by default it inherits the page's number of columns, but you can assign it a different number of columns. In practice this allows defining an independent grid within the section (e.g., the section can have more columns than the page), which provides freedom in arranging elements inside that section.

• How to set a custom column layout? The number of page columns can be changed after the form is created by editing its definition. In the application edit mode go to the Source tab and find the definition of the given page, then change the numColumns field in the system:Page.layout to the desired value (e.g. 12). In the case of sections changing the column layout is available directly in the Designer — in the Section component properties (the Layout) turn off column inheritance and enter your own number of columns for that section. Increasing the number of columns is not a problem (new columns will be added on the right); when decreasing the number of columns remember, however, to first appropriately shrink components in the given layout so that none exceeds the new smaller width.

Keep in mind that before decreasing the number of columns you must first shrink the components. This can be done in the Application view or in the Source by setting the option horizontalSpan to the same as the number of columns or smaller.