Datatable header height

Webix JS
1

Hello there,
I am using a datatable and want to change its styling. According to the docs (http://docs.webix.com/desktop__styling.html#stylingofaspecificpartofacomponentcssmaps) i can change the height of the header row thru setting the css class “webix_ss_header” (http://docs.webix.com/desktop__datatable_css.html).
For me this does not work as there is also the style attribute of the element set to a hardcoded height:

...

Where do these 46px come from? i initialize the table using

grid = new webix.ui({
view:“datatable”,
container: “testA”,
columns:[
{id:“firstname”, header:“Firstname”, width:150, sort:“server”},
{id:“lastname”, header:“Lastname”, width:150, sort:“server”},
{id:“city”, header:“City”, width:150, sort:“server”},
{id:“age”, header:“Age”, width:150, sort:“server”},
{id:“action”, header:“Action”, width:150}
],
url:"/people.json",
minHeight: 100,
maxHeight: 1000,
tooltip: function(obj, config){
//… doesn’t matter here
}
});

How do i remove the style attribute with the height?

Thanks,
Marc

2

Hello. You can use simple property height for any column header (it will be defined for the entire header), e.g.:

columns:[ 
      {id:"firstname", header:{text:"Firstname", height:35}}, 
  ... ]

Sample:

http://docs.webix.com/samples/15_datatable/12_header_footer/12_lineheight.html

3

Is there a way to do that through css (our design is css based)?

4

Yes, you need to specify .webix_ss_header and .webix_hcell styles:

http://webix.com/snippet/bcb0b276

5

Thanks, that did the trick. I missed the !important part.

6

Hello Listopad,
When i use this to reduce the height of the header, then the footer (or horizontal scrollbar) moves up to. See http://webix.com/snippet/20f70558
Is there any way to get rid of this behavior?
Also is there a way to hide that box at the bottom (footer, scrollbar, whatever it is :wink: ).
Marc

7

Scroll can be disabled via scrollX:false.

By the way, I’m sorry, I almost forgot about one more property - headerRowHeight, since you don’t want to set the height inside the column properties.

It will be easier than changing lots of styles to achieve the same goal.

Just compare this two snippets:

Webix properties: http://webix.com/snippet/6dc41cb1

CSS redesign: http://webix.com/snippet/1bb480fd

And this is not the end. Are you sure you want to go on with CSS?