Jump to content
uniGUI Discussion Forums
stevewong

Unidbgrid vertical oriented column title

Recommended Posts

Hi,

 

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

 

Steve

 

post-5886-0-15877300-1529025478_thumb.png

Share this post


Link to post
Share on other sites

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');
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi,

Which build are you using?

Can you make a simple testcase for this?!

Share this post


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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×