Unidbgrid vertical oriented column title

[stevewong]

Hi,

 

How can I make some of my unidbgrid column title to vertical oriented like the picture shown ?

 

Steve

 

[Sherzod]

Hi,

 

One possible solution:

 

1. CustomCSS:

.grid-header-vertical .x-column-header-text {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    
    /* transform doesn't work on inline elements */
    display: inline-block;
    
    /* need to hard code a height for this to work */
    /* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */
    height: 40px;
}

.x-ie8 .grid-header-vertical .x-column-header-text {
    /* IE8 doesn't have css transform */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

2.

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
    columns[1].addCls('grid-header-vertical');
}

[stevewong]

Hi,

Thanks for your solution, it works, but for short column title. If the column title is "Name", then  a height of 40px will do. But if the column title is "This is a long Header" and I set height to 100, then the column header did not show up ! How can I fix this ?

[Sherzod]

Hi,

Which build are you using?

Can you make a simple testcase for this?!

[stevewong]

Test case attached.

Have a unidbgrid with 3 colunms, 1 is horizontal, while the last 2 is vertical. With the 2 vertical column header, one title called "short" which can be displaycorrectly and the other is called "very logn title" that can not display properly. If I change the "height: 40px;" to "height: 140px;" then nothing display on the top of the grid. Please help !

Vertical-Column-Header.zip

[Kast2k]

In my case it was created so

.vertColumn {
  -ms-writing-mode:tb-lr;
  writing-mode:vertical-rl;
  height: 150px
}
.vertColumn .x-column-header-inner {
  width: 100%;
  padding: 3px!important;
}
.vertColumn .x-column-header-text {
  -ms-transform-origin-x: 125px;
  -ms-transform-origin-y: 70px;
  transform: rotate(180deg);
  text-align: left;
  white-space: normal;
}

Result