MDrivenWiki
Log in

Styling and CSS for Bootstrap, Angular and MVC

From MDrivenWiki

Layout

If you want to change the page layout, look here Layout and CSS

In the designer

Adding a text in “Style ref” (or an OCL-expression) to the viewmodel in designer, will add that string as a class on the controls tag in the html.

Build in styles for header h1, h2, h3, h4 works with default bootstrap. Example: h3 as style, will add class=”h3” to the control tag.

If you add an section of { } the part within the braces will be used as formatstring, the rest as style reference. For example, when formatting dates and time, {short} will show date and time in compact format.

Picture style

Images are rendered with img-responsive set. If you override in CSS, img-responsive is ignored.

Pictures NOT in grids

Has style class vmImage set. Add CSS to set size

Setting picture size in grids

Images in grids will take their size from the CSS rule vmImageInGrid by default. Add your own CSS to set other size.

To set style for a specific control, or group of controls, add style in the designer in “Style ref”. The content of “Style ref” will be added to an ng-class tag in the HTML. Don’t forget to add the style in your CSS.

Name use for style and css-classes

  • Name “Style” is used to render HTML as attribute style=”<attribute value>”
  • Name “CssClass” is used to render HTML as an added class with the name of the attribute value

Example

In OCL for the Style attribute, use 'background-color:#' + cell.ColourValue.toString('X6') + ';' for sending a colour value to a cell. You can of course also use a HTML colour name.

You can use ‘warning’ or ‘info’ for CssClass and it will colour using Bootstrap default CSS classes.

Table styling

Note! Breaking changes made. If you’ve already implemented using this guide before, look below for a few required changes

You can style tables in different ways: The column, The row or a single Cell

Add style to the viewmodel attribute (for name and data of the column) and it will style the entire column. (“Style ref:” in the designer)

Add a string attribute to the viewmodel used for a table with the name “Style” or “CssClass” to style the entire row. You usually make the resulting string dependent on the data for the cell for different colouring.

Add a string attribute to the viewmodel used for a table with the name <Column name>_Style or <Column name>_CssClass to style the column of the rendered row, i.e. the Cell. You usually make the resulting string dependent on the data for the cell for different colouring.