React CSS Classes API

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

dx-card

This class adds a shadow (in Material themes) or a border (in Generic themes) to elements to give them an appearance similar to that of Material Design's cards.

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.

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, dx-field-value and dx-field-value-static 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-static">John Smith</div>
</div>

DevExtreme UI components include WAI-ARIA markup to support screen readers. If you use a UI component within a field value element, associate the UI component with the field label to allow a screen reader to properly read the field. For this purpose, specify a unique ID for the field label element and assign this ID to the aria-labeledby attribute of the associated UI component as demonstrated below.

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" id="fullNameTextBox"></div>
    </div>
</div>

AngularJS

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" dx-text-box="{ value: fullName }"></div>
    </div>
</div>

Knockout

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" data-bind="dxTextBox: { value: fullName }"></div>
    </div>
</div>

NOTE

The dx-field-label and dx-field-value / dx-field-value-static classes are designed to have the label always be before the value. If you need to swap them around, override the float CSS property of these classes in the following way.

CSS

.dx-field-label {
    float: right;
}
.dx-field-value {
    float: left;
}
.dx-field-value-static {
    float: left;
}

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 components, knockout bindings or custom markup.

NOTE

The dx-field-label and dx-field-value classes are designed to have the label always be before the value. If you need to swap them around, override the float CSS property of these classes in the following way.

CSS

.dx-field-label {
    float: right;
}
.dx-field-value {
    float: left;
}

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, dx-field-value and dx-field-value-static 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-static">John Smith</div>
</div>

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

DevExtreme UI components include WAI-ARIA markup to support screen readers. If you use a UI component within a field value element, associate the UI component with the field label to allow a screen reader to properly read the field. For this purpose, specify a unique ID for the field label element and assign this ID to the aria-labeledby attribute of the associated UI component as demonstrated below.

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" id="fullNameTextBox"></div>
    </div>
</div>

AngularJS

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" dx-text-box="{ value: fullName }"></div>
    </div>
</div>

Knockout

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" data-bind="dxTextBox: { value: fullName }"></div>
    </div>
</div>

View Demo

dx-fieldset-header

A class used to display header of a dx-fieldset element.

HTML

<div class="dx-fieldset">
    <div class="dx-fieldset-header">Personal Data</div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">John Smith</div>
    </div>
</div>

The dx-fieldset-header element can hold plain text, UI components, knockout bindings or custom markup.

dx-field-value

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

jQuery

HTML

JavaScript

<div class="dx-field">
    <div class="dx-field-label">Name</div>
    <div class="dx-field-value" id="nameTextBox"></div>
</div>

$("#nameTextBox").dxTextBox({
    value: "John"
});

AngularJS

HTML

JavaScript

<div class="dx-field">
    <div class="dx-field-label">Name</div>
    <div class="dx-field-value" dx-text-box="{ value: name }"></div>
</div>

var myApp = angular.module('myApp', ["dx"]);
myApp.controller("demoController", function ($scope) {
    $scope.name = "John";
});

Knockout

HTML

JavaScript

<div class="dx-field">
    <div class="dx-field-label">Name</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: name }"></div>
</div>

var myViewModel = {
    name: ko.observable("John")
}
ko.applyBindings(myViewModel);

To display plain text, knockout bindings or custom markup within a field value element, use the dx-field-value-static CSS class.

DevExtreme UI components includes WAI-ARIA markup to support screen readers. If you use a UI component within a field value element, associate the UI component with the field label to allow a screen reader to properly read the field. For this purpose, specify a unique ID for the field label element and assign this ID to the aria-labeledby attribute of the associated UI component as demonstrated below.

jQuery

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" id="fullNameTextBox"></div>
    </div>
</div>

AngularJS

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" dx-text-box="{ value: fullName }"></div>
    </div>
</div>

Knockout

HTML

<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" data-bind="dxTextBox: { value: fullName }"></div>
    </div>
</div>

NOTE

The dx-field-label and dx-field-value classes are designed to have the label always be before the value. If you need to swap them around, override the float CSS property of these classes in the following way.

CSS

.dx-field-label {
    float: right;
}
.dx-field-value {
    float: left;
}

dx-field-value-static

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

HTML

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

The dx-field-value-static element can hold plain text, knockout bindings or custom markup. To display a UI component within a field value element, use the dx-field-value CSS class.

NOTE

The dx-field-label and dx-field-value-static classes are designed to have the label always be before the value. If you need to swap them around, override the float CSS property of these classes in the following way.

CSS

.dx-field-label {
    float: right;
}
.dx-field-value-static {
    float: left;
}

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 UI components like predefined icons from the built-in icon library.

HTML

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

dx-scheduler-cell-sizes-horizontal

Use this class to customize the Scheduler's table cells and the cells above them (in the day scale, All-day panel, etc.). For example, you can change the cell's width and keep all the elements aligned. For the day, week, workWeek, and month view types, this class applies only if crossScrollingEnabled is true.

CSS

#yourSchedulerID .dx-scheduler-cell-sizes-horizontal {
    width: 200px;
}

dx-scheduler-cell-sizes-vertical

Use this class to customize the Scheduler's table cells and the cells to the left of them (in the time scale). For example, you can change the cell's height and keep all the elements aligned. For timeline view types, this class applies only if crossScrollingEnabled is true.

CSS

#yourSchedulerID .dx-scheduler-cell-sizes-vertical {
    height: 200px;
}

dx-state-active

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

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

dx-state-disabled

Set this class to a UI component element to disable the UI component.

dx-state-focused

This class is applied to a UI component or UI component element when it is focused.

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

dx-state-hover

This class is applied to a UI component or UI component element when the mouse pointer is over it.

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

dx-state-invisible

Set this class to a UI component element to hide the UI component.

dx-theme-accent-as-background-color

Set this class to an element to color the element's background with the current theme's accent color.

dx-theme-accent-as-border-color

Set this class to an element to color the element's borders with the current theme's accent color.

dx-theme-accent-as-text-color

Set this class to an element to color the element's text with the current theme's accent color.

dx-theme-background-color

Set this class to an element to apply the current theme's background color to this element.

dx-theme-background-color-as-border-color

Set this class to an element to color the element's borders with the current theme's background color.

dx-theme-background-color-as-text-color

Set this class to an element to color the element's text with the current theme's background color.

dx-theme-border-color

Set this class to an element to apply the current theme's border color to this element.

dx-theme-border-color-as-background-color

Set this class to an element to color the element's background with the current theme's border color.

dx-theme-border-color-as-text-color

Set this class to an element to color the element's text with the current theme's border color.

dx-theme-text-color

Set this class to an element to apply the current theme's text color to this element.

dx-theme-text-color-as-background-color

Set this class to an element to color the element's background with the current theme's text color.

dx-theme-text-color-as-border-color

Set this class to an element to color the element's borders with the current theme's text color.

dx-translate-disabled

Set this class to a UI component element to disable translating the UI component 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>