Dynamic layout Dynamic layoutA dynamic layout is a DIV-based layout that allows for highly flexible display of content.
Dynamic layouts separate content and presentation.
You add content, such as properties, controls, and other sections, to a dynamic layout within a section.
You set the presentation of that content using dynamic layout formats specified in the skin. The formats set in the skin determine the width of the layout and the arrangement of items in the layout, for example, inline, stacked, or inline within a grid. Dynamic layout formats also define placement and alignment of items and labels, including spacing between items.
You can modify and create additional formats. Changing the format in the skin automatically affects all sections using that format.
Dynamic layouts can be nested within other dynamic layouts. Dynamic layouts have responsive behaviors.
As a best practice, use dynamic layouts when developing UI for applications rendered rendered in HTML5 Document Type (standards mode).
Dynamic layouts are available only to user interfaces rendered in HTML 5 Document Type (standards mode). See HTML5 Application Readiness and Upgrading an application to render in HTML5 Document Type on the PDN for more information.
As a best practice, use dynamic layouts rather than smart layouts for new development. It is recommended that you upgrade existing smart layouts to take advantage of HTML5 capabilities including cross-browser and cross-platform compatibility, access to the latest HTML markup, and improved performance.
When you open a section with a smart layout, you'll see a guardrail warning and a suggestion to upgrade.
Click Update layouts for Designer Studio to update this layout instance to a dynamic layout.
Some smart layout configurations may not have a one-to-one correspondence with dynamic layouts and may require some manual modifications. Note the following:
|
Harness and section forms — Adding a Dynamic Layout
Skin form — Components tab — Layouts — Dynamic Layouts |
Definitions