Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    row hight is not adjusted when rotating TH content

    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.


    Code:
    <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>

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,486
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Find the width of your div and use it to set the height of the <th>

    Code:
    <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.

  • #4
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    'Almost' the solution

    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 ....



    Code:
    <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>

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    I guess, you need to use CSS hacks to achiecve what you want

  • #6
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    What CSS hacks ?

    Quote Originally Posted by vikram1vicky View Post
    I guess, you need to use CSS hacks to achiecve what you want
    These hacks are ? Please educate me

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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/ht...-4-characters/

    We are here to exchange knowledge

    Cheers :-)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •