Aligning Text in a cell that is rotated vertically

Suite and Optimus Suite 5
#1

Hi I am trying to align text that has been rotated 270 degrees to the top of the column but as the div width on the text cell is too small it seems hard to align the text to the top. The inherited width (height) on the cell is the width of the parent column so is very small causing the cell to be a small width.

Currently the text is like this:

I
I
I
I
I
I
I
t
x
e
T
I

But I would like it to be like this

t
x
e
T
I
I
I
I
I
I

Thanks

#2

Hi

could you please attach a screenshot with awaited result?

#3

The aim is to get the Text to the top of the column. The surrounding dhtmlx cell div is highlighted. Thanks.

Column.PNG29×731 806 Bytes

#4

Please try the following:

.dhxlayout_base_dhx_web div.dhx_cell_layout.dhxlayout_collapsed_v div.dhx_cell_hdr div.dhx_cell_hdr_text { text-align: right; }

#5

Hi that does not work and the text stays in the same place as the surrounding div from the cell is too small.

#6

:frowning:

Works fine localy.

Could you please provide us complete demo including all correspondnig js/css files?
Please also add information regarding current and expected behaviour.

Here is a small guide how to make a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

If you don’t want to share your demo here for any reasons - you can send it to support@dhtmlx.com, if so - please include link to this forum topic.

If you’re using PRO Edition please send your demo to support@dhtmlx.com

#7

Hello Andrei,

Please see the attached demo. Please note the text size is variable so simply setting a top value doesn’t help in this instance. I will email it to the email address as well as we are PRO Edition customers.

Thanks

[demo was removed due it contains pro files]

#8

Hi

please add the following code once after dhtmlx.js loaded

dhtmlXLayoutCell.prototype._fitHdr = function() { var h = this.cell.childNodes[this.conf.idx.hdr]; if (this.conf.collapsed == true) { if (typeof(dhtmlXLayoutObject.prototype._confGlob.hdrColH) == "undefined") { h.style.height = this.cell.offsetHeight+"px"; dhtmlXLayoutObject.prototype._confGlob.hdrColH = parseInt(h.style.height)-this._getHdrHeight(true); } var size = this.cell.offsetHeight+dhtmlXLayoutObject.prototype._confGlob.hdrColH; h.style.height = size+"px"; h.firstChild.style.width = size-39+"px"; } else { h.firstChild.style.width = h.style.height = null; } h = null; };

latest version (4.6.1) already contain it.