CSS classes

In addition to the standard classes and components provided by the underlying Bootstrap 3 implementation, Metrici provides a number of CSS classes to aid solution builders.

  • Some general classes can be added to any content.
  • Some classes can be set using the Section Class (system.PROPERTIES.sectionClass) member type display property.
  • Some classes can be set using the Value Class (system.PROPERTIES.valueClass) member type display property.
  • Some classes pass through to the underlying Bootstrap code.

General classes

protected

Added automatically to the body in protected mode. Can be used to tailor options offered to user.

popup

When added to an <a> tag or <form> tag, shows the retrieved page in a popup.

Once in a popup, all <a> links and <form> responses continue to be shown in a popup.

Redirects are shown in the popup, unless:

  • The request parameter inpopup is set to true, or
  • The query string on the redirect includes popup=false

The request parameter inpopup is automatically set on forms in popups, so they always close the popup.

Redirects can be retained inside popups by setting popup=retain in the redirect query string.

The class nopopup can be added to an <a> tag so that, if the link is rendered in a popup, the retrieved page won't be shown in a popup.

The popped-up page does not show the header, title or footer, though the page title is shown as the title of the popup. The class popup-breadcrumb-off can be used to also turn off the breadcrumb trail.

number format

Formats a number in a display or input field. The format to show is given immediately after the number class. Supported formats are:

general 5432.1
gbp-rounded £5,432
gbp £5,432.10
rounded 5432
comma-rounded 5,432
comma 5,432.1

The number is always passed and returned in general format.

The class can be applied to any <input>, <span> or <td> element. It can also be used as a section class to format the member scale.

date format

Formats a date in a display or input field, and provides a date picker for date input. The format to show is given immediately after the date class. Supported formats are:

iso-extended 2013-09-05
en-little-endian-short 5 Sep 2013
little-endian-slash 05/09/2013

The date is always passed and returned in iso-extended format.

The class can be applied to any <input>, <span>, <td> or <div> element. It can also be applied as a value class to format the member value.

maTable 

Formats a table, optionally adding filter, sorting and pagination.

The table should have a <thead> with table headings in it, and a <tbody>.

The maTable class needs to be associated with one further class to control table formatting:

datatable Format a table that supports pagination, filtering and sorting.
datatable-nosort Format a table that supports pagination and filtering, but not sorting.
datatable-plain Format a table with no pagination, filtering or sorting.
maPopup

Provides a popup information block when the user hovers over some content. Because it relies on hover functionality, this is now deprecated because it is not considered mobile-friendly. New solutions should use the Bootstrap collapse component.

There are two ways of using maPopup:

  • Use an information icon.
  • Use a popup definition.

Information icon

<div class="maPopup">
<div class="popup-content">
Here is some further information.
</div>
</div>
This provides an information icon, with a hover over:

The classes popup-right, popup-below and popup-left can be used to alter the position of the popup relative to the icon.

Popup definition

In a popup definition, the icon is replaced with a word or short phrase.

<div class="maPopup popup-definition">
NATO
<div class="popup-content">
North Atlantic Treaty Organization
</div>
</div>
Gives

The position classes can also be used.

Bootstrap collapse

The Bootstrap collapse classes can be used to create a more touch-friendly popup, as in the following example.

<div style="display:inline-block;position:relative;" data-toggle="collapse" data-target="#mycollapse">
<span style="color:green;border-bottom:1px dashed green;cursor:pointer;">
NATO
</span>
<div id="mycollapse" class="collapse panel panel-default" style="position:absolute;top:20px;left:0px;width:20em;">
<div class="panel-body">
North Atlantic Treaty Organization
</div>
</div>
</div>
Gives
NATO
North Atlantic Treaty Organization
nostripes Removes the stripes from any table within it. This is often used as a section class with check boxes.
btn-spaced Puts spacing between adjacent child elements with class btn.
summary-hidden summary-show

Used to control visibility of content within a summary.

  • summary-hidden hides a block of content when it appears within a summary.
  • summary-show hides a block of content unless it appears within a of summary.

Summaries are identified by the class summary.

panel-*

Rearranges the page into a series of panels, and inserts the element into the given panel.

The panel format is:

Top
Left Center Right
Bottom

By default, all content is placed in the center panel. The top, left, right and bottom panels are empty, the left and right panels have zero width, and the center panel fills the entire content area.

Elements are placed in other panels by adding the classes panel-top, panel-left, panel-right or panel-bottom. There is no "panel-center" class because all elements are in the center by default.

When content is placed in the left or right panels, the width of the center panel is adjusted.

The default layout is to make the left and right columns 3 columns wide, leaving the center as 9 columns wide if only one of left or right is used, or 6 if both are used.

The width of the left and right columns can be modified using sizing classes panel-xx-n, where xx is sm or md, and n is 1 to 6. The width is taken from the first element in the left or right panel. For example class="panel-left panel-sm-2" would make the left panel two columns wide. The units (sm or md) for the first left panel (or the first right panel if there is no left panel) are used for the center panel also.

The panel layout is responsive. When the screen is too small, it is collapsed to Top, Left, Center, Right, Bottom.

scroll-bottom

When added to an element that scrolls, automatically scrolls to the bottom of the content.

hider

Hides the elements selected by the selector in the data-target attribute. There may be one or more selectors separated by commas.

For example

<div class="hidden hider" data-target="ul.breadcrumb"> </div>

Would hide the breadcrumb (hidden also hides the div itself).

The value classes editor and code may also be used as general classes.

Section classes

subpage

Formats this member type as the heading of a section within the page, and then inserts all member types up to the next subpage or buttons within that section, or use the section class subpage-off on the first member type you don't want in the subpage.

Subpages are best for little-used data, and can be awkward for commonly used data because of the need to open the panel. Add the class subpage-auto to enable automatic behaviour, in which:

  • In edit view, the subpage is automatically opened if data has been entered.
  • In browse view, the subpage is automatically opened if data has been entered, but deleted if the subpage is empty.
fancybuttons When used with member types with radio buttons, replaces the normal controls with larger tick/cross buttons. 
fancybuttons-name

When used with member types with radio buttons, replaces the normal controls with a larger button containing the target name.

To render radio buttons across the page, use a target layout display property of across and set the section class to fancybuttons-name or fancybuttons-description.

To render checkboxes as across-the-page buttons, use a target layout display property of checkbox, and set the section class to fancybuttons-name or fancybuttons-description together with member-horizontal-edit. (Checkboxes need member-horizontal-edit because checkboxes represent multiple members, but radio buttons a single member.)

fancybuttons-description

When used with member types with radio buttons, replaces the normal controls with a larger button containing the target description.

hidenotentered When used with member types with radio buttons or fancy buttons, hides the "not entered" option.
section-responsive

On wider screens, puts the section header on the left and the content of the section on the right.

The column for the header can be specified using a class of section-responsive-xx-n, where xx is one of the bootstrap width types (xs, sm, md, lg) and n is a number betweeen 1 and 11. For example section-resposive-sm-6 would put the content column half way across the page. The default is section-responsive-md-3.

Use section-responsive-right to right justify the header when it is to the left of the content, but keep it left justified if the content is collapsed.

The classes section-responsive-collapsed and section-responsive-horizontal are automatically generated for collapsed and horizontal columns, and you can use these to style the section further.

member-horizontal-edit

Lay the members out across the page, not down the page. Applies to edit mode only.

The following classes may also be useful as section classes:

  • number
  • nostripes

Value classes

editor

Use a text editor to edit the value.

By default, the text editor is only shown on the node edit page. If you want to show it on other pages, you must also add the class editor-show-on-browse.

code

Formats the text using a monospaced font and preserves whitespace. Used in conjunction with a value Value Type (system.PROPERTIES.valueType) display property of text.

On the edit page, a value class of code will switch on a code editor. Code highlighting can be switched on using an additional class: code-javascript, code-css, code-json, code-xml, code-html or code-auto. code-auto will attempt to guess the correct type of code.

code editor will only display on a node edit screen, or when used in conjunction with code-editor-show-on-browse class.

The code editor shows brief help when it starts up, which can be reshown by pressing SHIFT+F1 when in the editor.

The following classes may also be useful as value classes:

  • date

Pass-through classes

The classes mPopover and mTooltip switch on and pass through the the Bootstrap 3 popover and tooltip functionality respectively.

Within a mPopover, if there is an element with class mPopover-content, the content of this element will be used for the popover, but will not otherwise be shown. This makes it easy to add popovers that contain markup, as in the following example:

<div class="mPopover" style="display:inline-block;cursor:pointer;border-bottom:1px dashed black;"
data-placement="bottom">
What is a popover?
<div class="mPopover-content">
A popover is a piece of text that will be <em>popped over</em> the page.
</div>
</div>
What is a popover?
A popover is a piece of text that will be popped over the page.