Custom CSS Styling
The styling that VDL applies to the elements shown in the Insight app are controlled by settings in an embedded stylesheet, which can be overridden.
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:
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, 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.
|