Layout Rules

When you create multiple Section (vdl-section) elements within a Page (vdl-page), the sections will be stacked vertically. Row (vdl-row) elements within Sections are also stacked vertically. Column (vdl-column) elements using the default size (full width) will be vertically stacked within Rows.

Row Layout

Each Row is proportionally divided into twelve units, and each column can be assigned a width in units. Columns are aligned horizontally within a Row. Columns which do not have a size attribute assigned are equally distributed across the Row. If you have two or more Columns within a row that have size attributes defined, any Column on a Row that exceeds the width limit will be wrapped to a new line in the Row. Note that the Offset attribute on a Column is subtracted from the overall width available in the Column when calculating space on a Row.

Column Layout

Content within Column elements is stacked vertically. If you require inline elements, such as <span>, <a>, or <img>, to flow side-by-side then you can use a Container (vdl-container) to wrap these elements. So, for example, you could put multiple <span> elements within a Container to construct a paragraph made up of static and dynamic text.

Code editor

<vdl version="4.7">
    <vdl-page>
        <vdl-section>
            <vdl-row>
                <vdl-column heading="Flowing text">
                    <vdl-container>
                        <span vdl-text="Scenario: "></span>
                        <span vdl-text="=scenario.props.name"></span>
                    </vdl-container>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>

View Designer

Published Result in Xpress Insight

© 2001-2019 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.