Multiple lines on datatable header.

Webix JS
1

I have a datatable header that requires two lines to display and I’m trying to increase the height to be double the line height to show both lines. I’m using:

    header: {text: "Monday<br  /> 04/20", height: 60, css: "multiline" };
    
    .multiline{ line-height:30px; }

The problem with using this is that the height property also sets a line-height property, which overrides my multiline css.

I have also tried it without the height property as:


    header: {text: "Monday<br  /> 04/20", css: "multiline" };
    
    .multiline{ line-height:30px; height: 60px;}

But this also gets overridden by this style that webix is setting on my header cells.

    <style type="text/css" media="screen">#datatable1437106859069 .webix_hcell { height:45px; line-height:45px;}</style>

Do you have any ideas on how I can get around this or any other ways to allow multiple lines on a header cell?

2

you can use !important to override defaults

<style>
  .multiline{ line-height:30px !important; }
</style>

http://webix.com/snippet/ac2c3c6b

3

Thanks again. This worked great.

4

Hi @maksim, I have a situation like this:
https://snippet.webix.com/9z3tsynt

how you can see I have a problem when I scroll the datatable.
Is there anyone can help me with this issue?

5

Hi @OttavioTedesco

By default, scroll moves to a full length of rows - to change this behaviour, please disable scrollAlignY in the config

https://snippet.webix.com/o7289al6

6

Hi @Listopad
Thanks for replay.
How you can see from the snippet the problem is when the colums header has more the one line. How could I solve it, mantain that columns header? even thought i set scrollAlignY = true or false it won’t change. I have the 6.1 webix version. I saw in new webix version that it works but on the columns header doesn’t show me all the text. How can I fix it in my 6.1 version?

8

@OttavioTedesco sorry for my mistake, I have noticed another issue (uneven scrolling for rows with big height) and was focused on it.
The CSS sizing (such as height: auto) is not safe for elements in Webix views, as most of the sizes are set as a result of calculations in JS (here’s a related chapter in the documentation).

If you don’t know the desired height before init, you can calculate it later - similar to code in this example (lines 25-31): Code Snippet

1 Like
9

Hi @Listopad,
Thanks, this suggestion seems to help me with my problem.
Thank you