CSS Helper Classes

Introduction

CSS helper classes are intended to be used by developers to decrease duplicated style rules and increase development speed for new widgets. These are classes that can be appended to your html/dijit element to apply a certain style rule. The helper can be found at bundles/base/templates/common/common.css and bundles/base/themes/common/common.css depending whether it is a template or a theme helper.

General Layout Helper

noscrolling

Description

Disables scrollbars for the element where this class is applied to. Use carefully, because the content inside might get hidden.

Applies to

all html elements.
notSelectable

Description

disables text selection for the element, this class is applied to.

Applies to

all html elements.

Example

<span class="notSelectable">this text cannot be selected</span>
noPadding

Description

Sets the padding to 0 for all four edges.

May be especially useful if you put dijit/Layout/ContentPane inside another dijit/Layout/ContentPane or a dijit/Layout/BorderContainer.

ContentPanes have a default-padding of 8px set by dojo. When using nested LayoutContainer (such as ContentPane and BorderContainer)

The padding might get doubled up and destroy the widget’s layout. If used in combination with this helper class, this problem can easily be solved.

Applies to

all html elements.

Example

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', 'class':'noPadding'"></div>
noVerticalPadding

Description

Sets the padding to 0 for all top and bottom edge.

Applies to

all html elements.
noHorizontalPadding

Description

Sets the padding to 0 for left and right edge.

Applies to

all html elements.
padding-default

Description

Sets a default padding of 8px on each site of the element the class is applied to

Applies to

all html elements.
margin-default

Description

Sets a default margin of 8px on each site of the element the class is applied to

Applies to

all block or inline-block html elements.
fullwidthAndHeight

Description

Sets width and height to 100% each and removes padding as well as margin.

Applies to

all html elements that are block or inline-block elements (such as div).
fullWidth, fullHeight

Description

Sets width or height separately to 100%.

Applies to

all block or inline-block html elements inside elements that have a size defined.
overflow—​hidden, overflow—​auto

Description

Sets the overflow property to auto or hidden to allow or disallow scrolling when child elements are to large.

Applies to

all block or inline-block html elements.
shortenText

Description

Replaces overflowing text by "…​"

A width for the element must be defined. If text inside is wider, it is shortened by "…​".

Applies to

all html elements. Remeber that you can set the width only for block or inline-block elements.

Example

<span class="shortenText" style="width: 25px; display: inline-block;">Ein sehr sehr sehr sehr langer Text</span>
text–bold

Description

Makes a given Text printed in bold

Applies to

all html elements that don’t have font weight set sepcifically from somewhere else

Example

<span class="text–bold">My bold Text</span>
align-right

Description

Aligns text and other inline or inline-block child elements to the right. Use with care. Otherwise code and layout get too connected.

Applies to

all html elements.

Example

<div class="align-right"><p>Look, I’m right aligned!</p></div>
align-center

Description

Aligns text and other inline or inline-block child elements to center. Use with care. Otherwise code and layout get too connected.

Applies to

all html elements.

Example

<div class="align-center"><p>Look, I’m centered!</p></div>
rotate-90, rotate-180, rotate-270

Description

Rotates element clockwise by 90, 180 or 270 degree.

Applies to

all html elements.

Example

<div class="rotate-180">See? I’m upside down!</div>
flip-horizontal, flip-vertical

Description

Element is flipped horizontally or vertically.

Applies to

all html elements.

Example

<div class="flip-horizontal">If you can read this, turn me over!</div>
background-default

Description

The theme’s default background color is applied

Applies to

all html elements.
color-default

Description

The theme’s default text color is applied

Applies to

all html elements.
color-highlight

Description

Applies the theme’s highlight-color as font color to any native html element

Applies to

all html elements.

Responsive display of elements

Elements placed inside windows (for example Widgets) can be hidden depending on the window’s size or orientation.

Extra-Small Small Medium Large Extra-Large

.hidden-xs-and-down

HIDDEN

VISIBLE

VISIBLE

VISIBLE

VISIBLE

.hidden-sm-and-down

HIDDEN

HIDDEN

VISIBLE

VISIBLE

VISIBLE

.hidden-md-and-down

HIDDEN

HIDDEN

HIDDEN

VISIBLE

VISIBLE

.hidden-lg-and-down

HIDDEN

HIDDEN

HIDDEN

HIDDEN

VISIBLE

.hidden-xl-and-down

HIDDEN

HIDDEN

HIDDEN

HIDDEN

HIDDEN

.hidden-xs-and-up

HIDDEN

HIDDEN

HIDDEN

HIDDEN

HIDDEN

.hidden-sm-and-up

VISIBLE

HIDDEN

HIDDEN

HIDDEN

HIDDEN

.hidden-md-and-up

VISIBLE

VISIBLE

HIDDEN

HIDDEN

HIDDEN

.hidden-lg-and-up

VISIBLE

VISIBLE

VISIBLE

HIDDEN

HIDDEN

.hidden-xl-and-up

VISIBLE

VISIBLE

VISIBLE

VISIBLE

HIDDEN
Landscape Portrait

.hidden-on-landscape

HIDDEN

VISIBLE

.hidden-on-portrait

VISIBLE

HIDDEN

Icon Helper Classes

Icon helper classes can be used to set a certain icon at an element.

Overview: Available Icon Classes

Examples
<!-- Example for a dijitButtonNode with iconClass -->
<div data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'icon-default'"></div>
<!-- Examplefor an html element that is used to create an icon -->
<span class="icon-default"></span>

Advanced Helper Classes

ctPrimaryButton

Description

If you want to create a button with extra visual weight to identify the primary action in a set of buttons. It is not intended to give the button a certain color in the code. Use ctPrimaryInput to mark a certain button as more important than the other ones inside a widget.

Applies to

dijit/form/Button

Example

<div data-dojo-type="dijit/form/Button" data-dojo-props="label:'ButtonText','class':'ctPrimaryButton'"></div>
ctLoading

Description

Often a loading indicator is needed. As developer you can create a div an attach the class "ctLoading" to make it a spinning loading icon. As soon as loading has finished detach the class or the whole div. But it is important that the element the class is applied to has no width or height (for example width:20; height:22px). Otherwise the spinner does not spin around its center.

Applies to

all html elements that have no explicit width or height set

Example

<div class="ctLoading"></div>

There are further helper classes available that are explained together with live samples at

  • Building Layout with CSS Flexbox: https://<yourserver>/mapapps/js/sample/startup.html?app=css-flexbox

  • Building responsive Layout Grids in map.apps Windows: https://<yourserver>/mapapps/js/sample/startup.html?app=css-responsive-grid

  • Show and hide elements based on the size of the surrounding map.apps Window: https://<yourserver>/mapapps/js/sample/startup.html?app=css-responsive-display