RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/helpers/base_elements/ below:

JavaScript Helpers - CSS Classes of Base Elements

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:


<div class="dhx_form-group ">
    
    <label for="input" class="dhx_label ">I am label</label>
    
    <div class="dhx_input__wrapper">
        
        <div class="dhx_input__container">
            
            <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:


<button type="button" class="dhx_button dhx_button--color_danger dhx_button--view_link">
        
    <span class="dhx_button__icon dxi dxi-plus"></span>
    
    <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:


<label class="dhx_form-group dhx_checkbox dhx_form-group--inline" style="margin-left: calc(116px);">
        
    <input type="checkbox" class="dhx_checkbox__input"/>
    
    <span class="dhx_checkbox__visual-input"></span>
    
    <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:


<label class="dhx_form-group dhx_radiobutton dhx_form-group--inline" style="margin-left: calc(116px);">
        
    <input type="radiobutton" class="dhx_radiobutton__input"/>
    
    <span class="dhx_radiobutton__visual-input"></span>
    
    <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:


<div class="dhx_form-group dhx_form-group--inline">
    
    <label for="input" class="dhx_label" style="min-width: 100px; max-width: 100px;">I am label</label>
            
    <div class="dhx_input__wrapper">
        
        <div class="dhx_input__container">
            
            <div class="dhx_input__icon dxi dxi-magnify"></div>
            
            <input id="input" placeholder="I am input" name="" class="dhx_input dhx_input--icon-padding" autoComplete="off"/>
        </div>
        
        <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:


<div class="dhx_form-group dhx_form-group--inline">
    
    <label for="select_id" class="dhx_label" style="min-width: 100px; max-width: 100px;">select</label>
                
    <div class="dhx_input__wrapper">
        
        <div class="dhx_input__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>
        
        <span class="dhx_input__caption">Choose the number 5</span>
    </div>
</div>

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"
    }]
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4