App Designer - Positioning


App Designer - Positioning 2 Columns

App Designer is a drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row. The idea of positioning elements in your application is essential in designing user's expereience with your application.

App Designer - Positioning Sidebar

Each elements has a set of properties that controls the layout styles of the item such as width and even the margins. These styling can also be associated with a media query.  “Row” elements has a “Space Between Columns” property that allows for increased spacing between various columns within that row. By default, “Column” elements have the “Layout” property set to vertical which causes the elements to stack vertically. The “wrapping” Layout property allows for elements in the columns to line up left and right of each other until the columns is too small of which they start to stack vertical. The last Layout property of columns is “center-h-v” which centers the elements directly in the middle of a column.  This property is very useful when there is only one element in the column. The “D-Margins” Active Style is a style that is shared amongst elements such as Input forms and buttons. Changes to a shared style affects all of the elements that are associated with that style. Sidebars are another element that also allow for various positioning options from the “Squeeze” Layout, “Initially Open”, or the “Swipeable” property.

App Designer - Positioning Footer

Unlike other elements, footers are fixed to the bottom of the page and used as containers for menus as seen of mobile devices

Get started with the Intel XDK

Download Now