CODEWITHSUNDEEP
htmlcsscss-floathtml-table
Kristof
Kristof

Reputation: 3315

Am i forced to use nested tables for layout to scale a textarea?(example html included)

The website i am building has the requirement of increasing the size of a textarea as the resolution goes up.
I tried doing this with floating and non floating divs but in every scenario i tried so far the divs aligned nicely but i had no way of controlling the textarea size.
Standard tables do however provide this functionality out of the box except for 1 ie compatibility problem.

The following code works as intended in firefox and ie(quircks mode)
standard ie fails to resize the textarea height.
I don't mind some out of the box thinking, it don't have to be tables divs or whatever as long as it gets the job done.
I am aware javascript can do some resolution calculations but that solution feels a bit too complicated for a simple layout issue. The simpler & lesser code the better imo.

<!DOCTYPE html>
<html>
<body>
<table style="width: 100%">
<tr>
    <td style="width: 300px">
        <table class="clsDataGrid" width="100%" height="350px">
            <tr style="height:350px;background-color:blue;">
                <td style="height:350px">test</td>
            </tr>
        </table>
        <br/>      
        <table width="100%">
           <tr>
                <td style="background-color:red;height:100px">test</td>
            </tr>
        </table>
    </td>

    <td style="padding-left : 1em;height: 100%">
        <table class="clsDataGrid" style="width: 100%;height: 100%">
            <tr>
                <th>Description</th>
            </tr>
            <tr>
                <td style="height: 100%">
                    <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
                </td>
            </tr>
        </table>
    </td> 
    </tr>
</table>
</body>
</html>

Upvotes: 0

Views: 396

Answers (1)

frazerjay
frazerjay

Reputation: 143

Ok so solution 3 - using no js - you have to go tables. Watch out for how I had to force the description label in - its a bug fix not me being an idiot.

<!--Solution 3-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body {padding:0; margin:0;}
    table td {vertical-align: top;}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:350px; background-color:blue; color:white; padding:0 24px;">
            Blue Test
        </td>
        <td rowspan="2" style="padding:31px 24px 0; position:relative; height:100%">
                <label style="position:absolute; top:0; left:24px;">Description</label>
                <textarea style="resize: none; width:100%; height:100%;">DATAAAAA</textarea>
        </td>
    </tr>
    <tr>
        <td style="height:100px; background-color:red; color:white; padding:0 24px;">
            Red Test
        </td>
    </tr>
</table>
</body>
</html>

As with anything like this there are a bunch of solutions - here are two off the top of my head - a place for you to start - I haven't test cross browser.

Hope they help.

<!--Solution 1-->
<!DOCTYPE html>
<html>
<body>
<div style="display:table; width:100%">
    <div style="display:table-cell; width:30%;">
        <div style="height:350px; background-color:blue; color:white; padding:0 24px;">
            Blue Test
        </div>
        <div style="height:100px; background-color:red; color:white; padding:0 24px;">
            Red Test
        </div>
    </div>
    <div style="display:table-cell; vertical-align:middle">
        <div style="padding:0 24px;">
            <span>Description</span>
            <textarea style="resize: none; width:100%;height: 100%">DATAAAAA</textarea>
        </div>
    </div>
</div>
</body>
</html>

<!--Solution 2-->
<!DOCTYPE html>
<html>
<body>
<div style="width:100%">
    <div style="display:inline-block; width:30%;">
        <div style="height:350px; background-color:blue;">
            Blue Test
        </div>
        <div style="height:100px; background-color:red;">
            Red Test
        </div>
    </div>
    <div style="display:inline-block; width:69%">
        <span>Description</span>
        <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
    </div>
</div>
</body>
</html>

Upvotes: 1

Related Questions