Custom CSS Styling

You can provide custom CSS styling as a file called application.css within a css subfolder in your app's client_resources directory.

The file is implicitly included in each of your app's views.

If you were to add the following vdl-section CSS to the current state of this guide's example app:

/* CSS file */
.result-section {
    margin-top: 15px;
    height: 200px;}
.action-button + .action-button {
    margin-left: 5px;
}
vdl-section {
    outline: 1px solid #ccc;
}
vdl-section span {
    font-size: 30px;
}

The effects on the rendered Portfolio Optimization view would be as follows:

When providing custom CSS, you should be aware of some practical considerations:

• Styles should be applied directly to VDL tags and their attached classes. Do not tie CSS rules to elements you identify in the generated HTML.
• To preserve the correct container layout, use outline rather than border, as outline does not increase the size of containers.
• While you can add spacing above and below vdl-section elements, vdl-row elements and vdl-column elements, remember that adding horizontal spacing will break the Bootstrap layout. Doing this might work in some situations where there is only one item per vdl-row horizontally, but it should generally be avoided.
• The Autotable element is wrapped with a container that has the class .table-wrapper.
• Paragraph (<p>) elements have a margin-bottom of 20px by default.

Note: Elements such as vdl-row, vdl-column and autotable are described in later sections.