Jump to content

Unidbgrid vertical oriented column title


Recommended Posts

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');
}
Link to post
Share on other sites
  • 6 months later...

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 ?

Title-Nothing.png

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 1 year later...

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

image.png.88fb43d67c41136fd95630eb4a8c2b70.png

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...