CSS helper classes
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 or dijit widget element to apply a certain style rule.
General layout helper
noscrolling-
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-
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-
Sets the padding to 0 for all four edges.
Useful if you put
dijit/Layout/ContentPaneinside anotherdijit/Layout/ContentPaneor adijit/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. To solve this problem, use this helper class.
Applies to: All HTML elements.
Example:
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', 'class':'noPadding'"></div> noVerticalPadding-
Sets the padding to 0 for all top and bottom edge.
Applies to: All HTML elements.
noHorizontalPadding-
Sets the padding to 0 for left and right edge.
Applies to: All HTML elements.
padding-default-
Sets a default padding of 8px on each site of the element the class is applied to
Applies to: All HTML elements.
margin-default-
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-
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-
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-
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-
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. Remember 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-
Makes a given Text printed in bold
Applies to: All HTML elements that do not have font weight set specifically from somewhere else
Example:
<span class="text–bold">My bold Text</span> align-right-
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-
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-
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-
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-
The theme’s default background color is applied
Applies to: All HTML elements.
color-default-
The theme’s default text color is applied
Applies to: All HTML elements.
color-highlight-
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 |
VISIBLE |
VISIBLE |
VISIBLE |
VISIBLE |
|
HIDDEN |
HIDDEN |
VISIBLE |
VISIBLE |
VISIBLE |
|
HIDDEN |
HIDDEN |
HIDDEN |
VISIBLE |
VISIBLE |
|
HIDDEN |
HIDDEN |
HIDDEN |
HIDDEN |
VISIBLE |
|
HIDDEN |
HIDDEN |
HIDDEN |
HIDDEN |
HIDDEN |
|
HIDDEN |
HIDDEN |
HIDDEN |
HIDDEN |
HIDDEN |
|
VISIBLE |
HIDDEN |
HIDDEN |
HIDDEN |
HIDDEN |
|
VISIBLE |
VISIBLE |
HIDDEN |
HIDDEN |
HIDDEN |
|
VISIBLE |
VISIBLE |
VISIBLE |
HIDDEN |
HIDDEN |
|
VISIBLE |
VISIBLE |
VISIBLE |
VISIBLE |
HIDDEN |
| Landscape | Portrait | |
|---|---|---|
|
HIDDEN |
VISIBLE |
|
VISIBLE |
HIDDEN |
Icon helper classes
Icon helper classes can be used to set a certain icon at an element.
Overview: Available icon classes
<!-- Example for a dijitButtonNode with iconClass -->
<div data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'icon-default'"></div>
<!-- Example for an html element that is used to create an icon -->
<span class="icon-default"></span>Advanced helper classes
ctPrimaryButton-
To create a button with extra visual weight to identify the primary action in a set of buttons, use
ctPrimaryInput.Applies to:
dijit/form/ButtonExample:
<div data-dojo-type="dijit/form/Button" data-dojo-props="label:'ButtonText','class':'ctPrimaryButton'"></div> ctLoading-
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
|