Initializing help system before first use

Organize Page Content with Sections, Rows, Columns, and Containers

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=“5.6”>
    <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

© 2001-2025 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.