DataTable Rotate Header Text Auto Sizing Not Working

Webix JS
#1

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

#2

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