adds a CSS class(es) to the component
<style>
.bg-gray {
background: #efefef;
}
</style>
var dataview = new dhx.DataView("dataview", {itemsInRow: 5, css: "bg-gray"});
The DHTMLX library provides a set of CSS classes that you can apply to change appearance of Window.
var dataview = new dhx.DataView("dataview", {css: "dhx_widget--bg_gray"});
dhxWindow.show();
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 |
If you want to apply your own styles for selection of items or focus, you can do it via the corresponding CSS classes: .dhx_dataview-item--selected and .dhx_dataview-item--focus.
There is no need to use any additional custom classes.
<style>
.dhx_dataview-item--selected {
border-color: transparent;
box-shadow: 0px 1px 5px 0px rgb(2, 136, 209, 0.5),
inset 0px 0px 0px 1px rgb(2, 136, 209, 1);
}
</style>
var dataview = new dhx.DataView("dataview", {itemsInRow: 3});