EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Stefan B. on August 28, 2014, 07:32:02 AM

Title: How can I have a vertical text in datagrid header?
Post by: Stefan B. 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 >:(

Title: Re: How can I have a vertical text in datagrid header?
Post by: stworthy 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);

Title: Re: How can I have a vertical text in datagrid header?
Post by: Stefan B. 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 :-\

Title: Re: How can I have a vertical text in datagrid header?
Post by: thecyberzone 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 ?

Title: Re: How can I have a vertical text in datagrid header?
Post by: Juan Antonio Martínez 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 :-)