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, 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.
• 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.

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