Initializing help system before first use

Organize Page Content with Sections, Rows, and Columns

Introduced in the example app earlier, Sections can help you structure and organize your page content—they correspond to the Bootstrap container class. Sections can not be nested, instead use Rows and Columns within a Section to organize your content. For more see the later section Layout Rules.

Sections can have an optional heading attribute. Here, a section has been added below the Welcome to Portfolio Optimization section, and the Row holding the RESULTS and SCENARIO COMPARISON columns has been dragged into the new Section:

View Designer

Using Sections in View Designer

Code editor 
<vdl version=“4.7”>
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group name="action_group_1" draggable="true">
                <vdl-action-execute></vdl-action-execute>
            </vdl-action-group>
        </vdl-header>
        <vdl-section heading-level="1" heading="Welcome to Portfolio Optimization">
            <vdl-row>
                <vdl-column size="6" heading="INPUT DATA">
                    <vdl-table page-mode="paged" page-size="5">
                        <vdl-table-column entity="Shares_Return" editable="true">>
                    </vdl-table>
                </vdl-column>
                <vdl-column heading="CONFIGURE THE BASIS FOR YOUR DECISION" size="6">
                    <vdl-form>
                        <vdl-field label="Maximum investment per share" entity="MaxPerShare" size="4">>
                        <vdl-field label="Maximum investment into high-risk values" entity="MaxHighRisk" size="4">>
                    </vdl-form>
                    <vdl-button vdl-event="click:actions.action_group_1" label="RUN OPTIMIZATION"></vdl-button>
                </vdl-column>
            </vdl-row>
        </vdl-section>
        <vdl-section>
            <vdl-row>
                <vdl-column heading="RESULTS" size="6"><span vdl-text="Calculated optimal return:     "></span>
                    <span vdl-text="=scenario.entities.TotalReturn.value"></span>
                    <vdl-table column-filter="true" show-filter="true" page-mode="paged" page-size="5">
                        <vdl-table-column set="ShareIds"></vdl-table-column>
                        <vdl-table-column entity="Shares_fraction"></vdl-table-column>
                    </vdl-table>
                </vdl-column>
                <vdl-column heading="SCENARIO COMPARISON" size="6">
                    <ul>
                        <li vdl-repeat="=s, scenarioIndex in scenarios"><span vdl-text="=s.props.name"></span></li>
                    </ul>
                    <vdl-chart>
                        <vdl-chart-series entity="Shares_fraction" type="pie" scenario="=i" vdl-repeat="=s,i in scenarios"></vdl-chart-series>
                    </vdl-chart>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>

As is depicted above, you can also provide a heading-level attribute that controls the weight of the heading text—these follow the typical HTML conventions, with level 1 the largest.

Controlling Section Widths

The Page element in VDL defaults to a fixed width of 1140 pixels: Sections default to occupy the full width of the page.

You can customize the Section width by adding the width attribute to the Section ( <vdl-section>) element—widths are specified in pixels.
Note If the browser window is too narrow to display the full content, scrollbars are displayed.

Here, the Welcome to Portfolio section has had a width defined in the Attributes pane.

View Designer

Controlling Section Widths in View Designer

Code editor 
<vdl-section heading="Welcome to Portfolio Optimization" heading-level="1" width="1000">
By contrast to using a fixed width, sections can also be defined as fluid using a layout="fluid" attribute, where text and other content re-flow to fit the browser's width whenever it is resized. 
<vdl-section layout="fluid">
  This text will wrap onto the next line if the window becomes too narrow.
</vdl-section>
The width attribute is not permitted on a fluid section.
Parent Topic Working with Page Layouts and Styling