CSS classes of base elements

The DHTMLX library provides a set of CSS classes that you can add to HTML elements to style them in your web project outside DHTMLX widgets.

The principle of these CSS classes' naming is based on the BEM methodology.

Therefore, a class name includes three parts:

• Block name
• Element name
• Modifier name

Block names and element names are separated by a double underscore: block__element.

Block and elements' names are separated from modifier names by a double hyphen: block--modifier, block__element--modifier.

note

The 'dhx' prefix is used at the beginning of all class names in the DHTMLX library

The full list of CSS classes of the DHTMLX library you can use to style HTML elements is described below.

Form group

Block

Name	Description
dhx_form-group	Use this class to apply the same formatting to different HTML elements at once. It includes modifiers for manipulating the appearance and state of a layout.

Modifiers

Name	Description
dhx_form-group--no-message-holder	Removes the bottom margin where a text for a pre-message could be placed
dhx_form-group--disabled	A form-group has a disabled state. It can't be activated (selected, clicked on, typed into) or accept focus.
dhx_form-group--hidden	Hides a form group visually
dhx_form-group--required	Adds the required mark to a label inside a form group
dhx_form-group--state_error	Marks the content of input/label red. Indicates error
dhx_form-group--state_success	Marks the content of input/label green. Indicates success
dhx_form-group--label_sr	Hides a label inside a form group visually
dhx_form-group--inline	Puts a label and an input in one line
dhx_form-group--textarea	Add this class to the form group, which contains a <textarea> element, to style it

Here's what markup looks like using a form-group example:

<!-- Form-group block -->
<div class="dhx_form-group ">
    <!-- Label block -->
    <label for="input" class="dhx_label ">I am label</label>
    <!-- 'wrapper' element in the 'input' block-->
    <div class="dhx_input__wrapper">
        <!-- 'container' element in the 'input' block-->
        <div class="dhx_input__container">
            <!-- Style the input-->
            <input id="input" placeholder="I am input" class="dhx_input" autoComplete="off"/>
        </div>
    </div>
</div>

Button

Block

Name	Description
dhx_button	Add this class to a <button> element to reset/normalize default browser styles.

Elements

Name	Description
dhx_button__icon	Container for an icon
dhx_button__text	Container for button text/value
dhx_button__loading	Use this class to create a container for the loading mode
dhx_button__loading-icon	Use this class together with the "dhx_button--loading" class to create an icon container for the loading mode

Modifiers

Name	Description
dhx_button--circle	Use this class either to add rounded corners to a button with value or to create a circular button that contains only an icon
dhx_button--width_full	Add this class to adjust the width of a button to the width of its container
dhx_button--disabled	Use this class to change the button view to disabled. Instead of this class you can add the disabled attribute.
dhx_button--loading	Apply the loading modifier to switch the button to the loading state. Both the "dhx_button--loading" and "dhx_button__loading-icon" elements must be applied.
dhx_button--size_small	Use this class to add a small button
dhx_button--size_medium	Use this class to add a medium button
dhx_button--view_flat	Use this class to create a flat button
dhx_button--view_link	Use this class to create a link button
dhx_button--color_primary	Blue button (#0288d1). Use this modifier together with the 'view' modifier
dhx_button--color_secondary	Gray button (#4d4d4d). Use this modifier together with the 'view' modifier
dhx_button--color_danger	Red button (#ff5252). Use this modifier together with the 'view' modifier
dhx_button--color_success	Green button (#0ab169). Use this class together with the 'view' modifier

Here is an example how you can specify a markup for a button:

<!-- Create a link button with red color-->
<button type="button" class="dhx_button dhx_button--color_danger dhx_button--view_link">
    <!-- The button has the "plus" icon-->    
    <span class="dhx_button__icon dxi dxi-plus"></span>
    <!-- The "Send text" button-->
    <span class="dhx_button__text">Send</span>
</button>

Label

Block

Name	Description
dhx_label	Add this class to a <label> element inside a form group to style it

You can style a <label> element, as in:

<label for="element-id" class="dhx_label">Email</label>

Checkbox

Block

Name	Description
dhx_checkbox	Add this class to the "dhx_form-group" class inside a <label> element to create a label for a checkbox.

Elements

Name	Description
dhx_checkbox__input	Add this class to the <input type='checkbox'> element to hide a native browser checkbox but save its behavior
dhx_checkbox__visual-input	Add this class to a <span> element to display a checkbox with its native browser behavior visually

You can change the appearance of a native browser checkbox by using a markup given below:

<!-- Create a label for a checkbox and put it and an input in one line inside the form-group-->
<label class="dhx_form-group dhx_checkbox dhx_form-group--inline" style="margin-left: calc(116px);">
    <!-- Hide a native browser checkbox but save its behavior-->    
    <input type="checkbox" class="dhx_checkbox__input"/>
    <!-- Display the checkbox with its native browser behavior visually-->
    <span class="dhx_checkbox__visual-input"></span>
    <!-- Style the checkbox label-->
    <span class="dhx_label ">I am checkbox</span>
</label>

Radiobutton

Block

Name	Description
dhx_radiobutton	Add this class to the "dhx_form-group" class inside a <label> element to create a label for a radiobutton.

Elements

Name	Description
dhx_radiobutton__input	Add this class to the <input type='radiobutton'> element to hide a native browser radiobutton but save its behavior
dhx_radiobutton__visual-input	Add this class to a <span> element to display a radiobutton with its native browser behavior visually

You can apply a markup to style a radiobutton, like this:

<!-- Create a label for a radiobutton and put it and an input in one line inside the form-group-->
<label class="dhx_form-group dhx_radiobutton dhx_form-group--inline" style="margin-left: calc(116px);">
    <!-- Hide a native browser radiobutton but save its behavior-->    
    <input type="radiobutton" class="dhx_radiobutton__input"/>
    <!-- Display the radiobutton with its native browser behavior visually-->
    <span class="dhx_radiobutton__visual-input"></span>
    <!-- Style the radiobutton label-->
    <span class="dhx_label ">I am radiobutton</span>
</label>

Input

Block

Name	Description
dhx_input	Add this class to an <input type='text'> element to style it

Elements

Name	Description
dhx_input__wrapper	Wrapper for an input container and caption
dhx_input__container	Container for an input with icon
dhx_input__icon	Container for an input icon
dhx_input__caption	Container for an input caption

Modifiers

Name	Description
dhx_input--icon-padding	Apply this class to create a special padding inside an input where an icon will be placed
dhx_input--textarea	Apply this class to style a <textarea> element
dhx_input--textinput	Removes all borders from an <input> element

An example of the input markup is given below:

<!-- Create a form-group and put an input and its label in one line-->
<div class="dhx_form-group dhx_form-group--inline">
    <!-- Create the label for the input and style it-->
    <label for="input" class="dhx_label" style="min-width: 100px; max-width: 100px;">I am label</label>
    <!-- Create a wrapper for the input container inside form-group -->        
    <div class="dhx_input__wrapper">
        <!-- Create the container for the input with icon-->
        <div class="dhx_input__container">
            <!-- Put the "dxi-magnify" icon into the container-->
            <div class="dhx_input__icon dxi dxi-magnify"></div>
            <!-- Create the input with the padding for the icon-->
            <input id="input" placeholder="I am input" name="" class="dhx_input dhx_input--icon-padding" autoComplete="off"/>
        </div>
        <!--Create "Message text" caption -->
        <span class="dhx_input__caption">Message text</span>
    </div>
</div>

Select

Block

Name	Description
dhx_select	Add this class to a <select> tag to style it

The markup of select looks like this:

<!-- Create a form-group and put an input and its label in one line-->
<div class="dhx_form-group dhx_form-group--inline">
    <!-- Create the label for the select and style it-->
    <label for="select_id" class="dhx_label" style="min-width: 100px; max-width: 100px;">select</label>
    <!-- Create the wrapper for the input container inside form-group -->            
    <div class="dhx_input__wrapper">
        <!-- Create the container for the input with icon-->
        <div class="dhx_input__container">
            <!-- Put the "dxi-menu-down" icon into the container-->
            <span class="dhx_input__icon dxi dxi-menu-down"></span>
            <select id="select_id" >
                <option></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <!--Create "Choose the number 5" caption -->
        <span class="dhx_input__caption">Choose the number 5</span>
    </div>
</div>

Extra classes

The DHTMLX library also provides you with a set of CSS classes that you can apply to change look and feel of DHTMLX widgets.

List of CSS classes for styling a widget:

Name	Description
dhx_widget--bg_white	Sets white background to a widget
dhx_widget--bg_gray	Sets gray background to a widget
dhx_widget--bordered	Sets borders on all sides of a widget
dhx_widget--border_top	Sets a border on the top side of a widget
dhx_widget--border_bottom	Sets a border on the bottom side of a widget
dhx_widget--border_left	Sets a border on the left side of a widget
dhx_widget--border_right	Sets a border on the right side of a widget
dhx_widget--border-shadow	Adds a shadow border to a widget
dhx_widget--no-border_top	Removes the top border of a widget
dhx_widget--no-border_bottom	Removes the bottom border of a widget
dhx_widget--no-border_right	Removes the right border of a widget
dhx_widget--no-border_left	Removes the left border of a widget

Here is an example of Ribbon customization:

const ribbon = new dhx.Ribbon("ribbon", {
    css:"dhx_widget--bg_white"
});

List of CSS classes for styling a Layout cell:

Name	Description
dhx_layout-cell--bg_white	Sets white background to a layout-cell
dhx_layout-cell--bg_gray	Sets gray background to a layout-cell
dhx_layout-cell--bordered	Sets borders on all sides of a layout-cell
dhx_layout-cell--border_top	Sets a border on the top side of a layout-cell
dhx_layout-cell--border_bottom	Sets a border on the bottom side of a layout-cell
dhx_layout-cell--border_left	Sets a border on the left side of a layout-cell
dhx_layout-cell--border_right	Sets a border on the right side of a layout-cell
dhx_layout-cell--border-shadow	Adds a shadow border to a layout-cell
dhx_layout-cell--no-border_top	Removes the top border of a layout-cell
dhx_layout-cell--no-border_bottom	Removes the bottom border of a layout-cell
dhx_layout-cell--no-border_right	Removes the right border of a layout-cell
dhx_layout-cell--no-border_left	Removes the left border of a layout-cell

An example of customization of a Layout cell is given below:

const layout = new dhx.Layout("layout", {
    css: "dhx_layout-cell--bordered",
    rows: [{
        id: "toolbar",
        html: "Header",
        css: "dhx_layout-cell--border_bottom layout-header",
        gravity: false,
        height: "60px"
    }]
});