Overwriting CSS style for webix_datatview_item

Webix JS
1

Hi,

I tried to overwrite the “webix_dataview_item” style with additionally css class “my_dataview_item”. I added the property “$CSS” tho a data item (not the best way), but found in webix a hardcoded styling additionally to the css class.

The resulting html code is:

<div class="webix_dataview_item my_dataview_item " style="width:160px; height:50px; float:left; overflow:hidden;" webix_f_id="1221">BVM5</div>

This is done by the line in the dataview protoUI:

templateStart:webix.template("<div webix_f_id='#id#' class='{common.classname()}' style='width:{common.width}px; height:{common.height}px; float:left; overflow:hidden;'>"),

Why hardcoding the width & height - the property is already defined in the CSS definition?

2

You can configure dataview to not hardcode the height and width values. To do so you need to have height and width set to “auto”

http://webix.com/snippet/46743a5c

When using css based sizing, some features will not work ( xCount, yCount, parent to dataview sizing ) because dataview will not know the size of item and can’t predict how much space it will need to have.