CSS Classes

This section describes the DevExtreme CSS classes you can use to define the appearance of an element.

dx-clearfix

Set this class to an element to automatically increase the height of this element if floating child elements overflow the current element box.

Show Example:
jQuery

dx-field

Defines the appearance of an element displaying a field-value pair within a dx-fieldset element.

The dx-field field element may include label and value elements intended to display the field name and value respectively. Use the dx-field-label and dx-field-value classes to create label and value elements.

HTML
<div class="dx-field">
    <div class=dx-field-label>Full Name</div>
    <div class=dx-field-value>John Smith</div>
</div>
Show Example:
jQuery

dx-field-label

A class used to display a field name within the dx-field element.

HTML
<div class="dx-field">
    <div class=dx-field-label>Full Name</div>
    <div class=dx-field-value>John Smith</div>
</div>

The dx-field-label element can hold plain text, UI widgets, knockout bindings or custom markup.

Show Example:
jQuery

dx-fieldset

Defines the appearance of an element displaying a list of field-value pairs.

To create a fieldset element, create an element and assign "dx-fieldset" to its' class attribute.

HTML
<div class="dx-fieldset">
    . . .
</div>

Each fieldset item is displayed within a separate field element, which has the dx-field class. The field element may include label and value elements intended to display the field name and value respectively. Use the dx-field-label and dx-field-value classes to create label and value elements.

HTML
<div class="dx-field">
    <div class=dx-field-label>Full Name</div>
    <div class=dx-field-value>John Smith</div>
</div>

The field label and value elements can hold plain text, UI widgets, knockout bindings or custom markup.

Show Example:
jQuery

dx-field-value

A class used to display a field value within the dx-field element.

HTML
<div class="dx-field">
    <div class=dx-field-label>Full Name</div>
    <div class=dx-field-value>John Smith</div>
</div>

The dx-field-value element can hold plain text, UI widgets, knockout bindings or custom markup.

Show Example:
jQuery

dx-icon-IconName

Use this class to add a custom icon to the style sheet used in your application.

The name of this class must include the real name of the icon. For instance, the "myicon" icon must be defined by the "dx-icon-myicon" class.

CSS
.dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/
  OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/
  g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}

As you can see, the icon is added in the Base64 type in the code above. We recommend that you also use this type to reduce the number of requests and the amount of data transferred.

The icons that are added to the stylesheet via this class can be used for DevExtreme widgets like predefined icons from the built-in icon library.

CSS
<div class="button" data-bind="dxButton: { icon: 'myicon', text: 'Click me' }"></div>
Show Example:
jQuery

dx-state-active

This class is applied to a widget or widget element when it is touched or clicked.

You can specify a custom style for this class to override the default style.

Show Example:
jQuery

dx-state-disabled

Set this class to a widget element to disable the widget.

Show Example:
jQuery

dx-state-invisible

Set this class to a widget element to hide the widget.

Show Example:
jQuery

dx-translate-disabled

Set this class to a widget element to disable translating the widget text to a local language.

dx-user-select

Set this class to a <span> element to enable a user to select the text contained in this element.

HTML
<p>You can select <span class="dx-user-select">this text</span>.</p>