Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Containing element not expanding vertically when content has rotated text

Containing element not expanding vertically when content has rotated text

Problem

I have a table with some th tags that contain text that is rotated via CSS. The problem I have is that the th is not Expanding Vertically with the content. Here is a basic example of the markup I have:

HTML:

Some Text
Some More Text
Even More Text

CSS:

.rotated-text {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
}

Example: http://jsfiddle.net/UPFkX/1/

Problem courtesy of: Kevin

Solution

A few edits to your code.

Remove the div and add the class"rotated-text" to your th. add this javascript
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})

Make sure your page calls on jQuery.

http://jsfiddle.net/UPFkX/3/

Solution courtesy of: Juan Rangel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Containing element not expanding vertically when content has rotated text

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×