Jump to content


Photo

Unidbgrid vertical oriented column title

unidbgrid

  • Please log in to reply
1 reply to this topic

#1 stevewong

stevewong

    Member

  • uniGUI Subscriber
  • PipPip
  • 10 posts

Posted 15 June 2018 - 01:18 AM

Hi,

 

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

 

Steve

 

Attached Files


  • 0

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5199 posts

Posted 15 June 2018 - 03:30 AM

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

  • 0





Also tagged with one or more of these keywords: unidbgrid

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users