row hight is not adjusted when rotating TH content

hgs

06-10-2012, 12:23 PM

Hi

I would expect an adjustment of the hight of a row when the content of
one of the TH elements is rotated 90 degrees, but this is not the case.

Is my expectation wrong ?

Just grab the example below and display it in your browser.

<html>
<head>
<title>rotate</title>
<style>
.rotate{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;
}
</style>
</head>
<body>

<pre>

Here the content of the TH element is rotated
but there is no change of the layout if the parent TR

</pre>

<table border="1">
<tr><th>a</th><th>b</th><th><div class="rotate">ccccccc</div></th></tr>
<tr><td>1</td><td>22</td><td>333</td></tr>
</table>
<pre>

Here the entire TH element is rotated

</pre>

<table border="1">
<tr><th>a</th><th>b</th><th class="rotate">ccccccc</th></tr>
<tr><td>1</td><td>22</td><td>333</td></tr>
</table>

</body>

</html>

Richter

06-10-2012, 12:33 PM

I'm not see any fix about this but in my case I set "th" as a squire( width[px] == height[px] ) manually, maybe ugly but better then do nothing.

sunfighter

06-10-2012, 09:22 PM

Find the width of your div and use it to set the height of the <th>

<table border="1">
<tr style="height: 60px;">
<th>a</th>
<th>b</th>
<th><div class="rotate">ccccccc</div></th>
</tr>
<tr><td>1</td><td>22</td><td>333</td></tr>
</table>It was 50px I added some space.

hgs

06-11-2012, 12:23 PM

With the function at the end , the row height and cell width will be
adjusted for: Chrome, FF, Opera

For IE9 only the row height will be adjusted

Unfortunatly my customer uses IE ....

<html>
<head>
<title>rotate</title>
<style>
.rotate{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
</style>
</head>
<body>

<pre>

Here the content of the TH element is rotated
but there is no change of the layout if the parent TR

</pre>

<table id="t1" border="1">
<tr valign="bottom" id="tr">
<th>a</th><th><div class="rotate">two<br>twotwo</div></th><th id="th" align="left"><div id="r1" class="rotate">cccc33333ccc</div></th><th>ddddddd</th>
</tr>
<tr id="tr2">
<td>1</td><td>22</td><td>333</td><td>4444</td>
</tr>
</table>
<pre>
executing the javascript function will adjust the row hight and cell width.
</pre>
</body>
</html>
<script>
function f1(){
var i,tr,high,div,cells;
tr=document.getElementById('tr');
cells=tr.cells;
for(i=0,high=0;i<cells.length;i++){
if(cells[i].firstChild.tagName==='DIV' && cells[i].firstChild.className==='rotate'){
div=cells[i].firstChild;
if(cells[i].offsetWidth>high){
tr.style.height=cells[i].offsetWidth+'px';
high=cells[i].offsetWidth;
}
cells[i].firstChild.style.width=div.offsetHeight+'px';
}
}
}
f1();
</script>

vikram1vicky

06-11-2012, 01:03 PM

I guess, you need to use CSS hacks to achiecve what you want :)

hgs

06-11-2012, 01:14 PM

I guess, you need to use CSS hacks to achiecve what you want :)

These hacks are ? Please educate me :)

vikram1vicky

06-11-2012, 01:37 PM

Please go through following links and let me know if you need further assistant :)

http://www.webdevout.net/css-hacks

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

We are here to exchange knowledge :)

Cheers :-)