Angular CSS Classes API

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

View on GitHub

dx-card

This class adds a shadow (in Material and Fluent 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>
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-static>John Smith</div> </div>

The dx-field-value-static element can hold plain text 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-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, 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>

View Demo

dx-fieldset-header

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

CSS
 #yourSchedulerID .dx-scheduler-cell-sizes-horizontal { width: 200px; }
NOTE
The Scheduler does not support .dx-scheduler-cell-sizes-horizontal element dimension modification at runtime.

dx-scheduler-cell-sizes-vertical

Use this class to customize Scheduler 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 set to true.

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