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 CSS to the current state of this guide's example app:
/* CSS file */
vdl-section {
outline: 1px solid #ccc;
}
vdl-section span {
font-size: 30px;
}
The effects on the rendered
Portfolio Optimization view would be as follows:
Example CSS After Rendering
Note the outline on the <vdl-section> element and the resized font on the <span> elements.
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, keep in mind 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.
- Autotable is wrapped with a container that has the class .table-wrapper.
- <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.
|
Compact Layout
A compact page style is available that reduces the vertical spacing between elements on a page (including row spacing in tables). To enable this, add the
compact class to the
vdl-page element.
<vdl version="4.1">
<vdl-page class="compact">
...
</vdl-page>
</vdl>