EasyUI Forum
May 03, 2024, 12:10:40 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How can I have a vertical text in datagrid header?  (Read 10298 times)
Stefan B.
Full Member
***
Posts: 152


Software Architekt


View Profile Email
« on: August 28, 2014, 07:32:02 AM »

It is possible to have a vertival text in some datagrid header columns? Also it must work with IE8.
We work with images to handle thios problem, but this is not so flexible  Angry

Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: August 28, 2014, 08:39:22 PM »

To rotate 270 degrees in IE, please try adding the following code to your stylesheet:
Code:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Logged
Stefan B.
Full Member
***
Posts: 152


Software Architekt


View Profile Email
« Reply #2 on: August 29, 2014, 12:16:21 AM »

Thx. This code works for modern browsers
Code:
.rotate {
-webkit-transform: rotate(-90deg); /* Safari */
-moz-transform: rotate(-90deg); /* Firefox */
-ms-transform: rotate(-90deg); /* IE */
-o-transform: rotate(-90deg); /* Opera */

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

But on IE Browser < 10 we can only work with rotated images  Undecided
« Last Edit: August 29, 2014, 01:07:07 AM by Stefan B. » Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #3 on: November 19, 2014, 12:16:32 AM »

But how can I apply this .rotation class to rotate datagrid header? means, how it will be applied ?
Logged
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« Reply #4 on: November 19, 2014, 01:32:54 AM »

mmmhh.... some thing like:
Code:
<style>
/* rotacion de texto */
.datagrid-header-row td  {
height:40px; /* need to be properly fixed */
-webkit-transform: rotate(-90deg); /* Safari */
-moz-transform: rotate(-90deg); /* Firefox */
-ms-transform: rotate(-90deg); /* IE */
-o-transform: rotate(-90deg); /* Opera */
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

but, still needs some work in proper header cells width/height :-)
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!