DataTable Rotate Header Text Auto Sizing Not Working

Hi there,

I'm trying to rotate text in the header of my DataTable and have it autosized to ensure the text is displayed in full. The issue is that I am setting the width of the column, but the height of the header does not seem to be increasing in order to catch the full text so the text is being cut off.

My configuration is:

webix.ui({
    container: $context.$el.find('#table-holder').get(0),
    id: 'selectionManager',
    view: 'datatable',
    footer: false,
    areaselect: true,
    autoheight: true,
    autowidth: true,
    leftSplit: 1,
    columns: [
        {id: 'context1', adjust: true, header: [{text: 'Class'}]},
        {id: 'profile1', width: 35, header: [{text: 'this is my very long profile name', rotate: true}]},
        {id: 'profile2', width: 35, header: [{text: 'this is my very very very long profile name', rotate: true}]}
    ],
    data: [
        {context1: 'sad', profile1: '1', profile2: 0},
        {context1: 'mad', profile1: '1', profile2: 0},
        {context1: 'bad', profile1: '1', profile2: 0},
        {context1: 'glad', profile1: '1', profile2: 0}
    ]
});

The result is as follows: https://nathanfranklin.com.au/screen.png

I am using 4.1 pro.

Any help would be greatly appreciated!

Thank you.

Nathan

Comments

  • edited March 20

    Hi,

    This is not exactly a bug as headers do not automatically adjust to text size.
    Anyway, we will consider to add austosizing logic for rotated headers.

    For now you can provide a height parameter for the heeded header lines, which can be either a fixed number, or a calculated value:

    Please, check the related snippet: http://webix.com/snippet/18c1c60b

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion