The Intel® XDK App Designer supports a number of UI frameworks and a number of layout controls, as described in Using Layout Controls in App Designer.
This topic describes:
Feature | Description |
---|---|
Using Absolute Positioning | Provides the ability to position a control absolutely within a row or column-containing widget. |
Rest of Space Property | Provides the ability to reserve remaining space in a row or column between controls that would otherwise be filled. |
Using Absolute Positioning
Normally, controls use the position:relative
CSS property. This means that controls are positioned next to one another, without overlapping. Any given control's exact position is determined by its preceding neighbors, and it can be moved closer or farther away from them by leveraging margin styles.
But, sometimes you will want to position a control absolutely. App Designer supports this for most controls. There is a simple checkbox at the top of the Controls pane to it turn on and the next control inserted will be inserted with absolute positioning.
Prerequisite: Row or Column
App Designer only supports absolute positioning of controls on a Column. So before attempting to insert a control absolutely, be sure to insert a Row or some other column-containing widget (some tabs or accordions from various frameworks).
Positioning Values
When positioning absolutely, as the control is dragged around the parent, the Absolute Positioning Values control appears to the left of the document and will show the values. Note that it will attempt to set only _two_ values at a time, leaving the other two as ‘auto’. This allows you to place a control relative any corner of the parent. Once placed into a corner, all subsequent drag-positioning will be relative that same corner.
Once placed, an absolutely positioned control receives an absolute-positioning style that can be edited directly, if desired.
Rest of Space Property
Some controls, like list views and rows, provide a property called rest of space. For example, for a Row:
This property helps solve a particular layout challenge that you may sometimes face. With the neighbor-determined relative positioning in a vertical column, it is easy to place any set of controls at the top of a page and manage their placement. Similarly, with a footer, it is easy to put some controls at the bottom of a page.
But what if there is space between the controls at the top and the bottom of the page? In this simple app design there is a Row with a blue background that contains text. The Row is followed by a button (Next).
In this first screen, the Row does not have the rest of space option selected. Its size is determined solely by its content.
But in this second screen, the Row has selected rest of space. Thus the Row takes up all remaining space on the page, but without pushing any other controls off screen or requiring scrolling.
NOTE: To see the effects of the rest of space property, view the running app. In App Designer, nothing happens immediately.