4

I am trying to develop a system that enables the users to manually resize a textarea and iframe. I have illustrated what I mean bellow:

<body>

    <table width="100%">
        <tr>

        <!-- basically I want the user to be able to manually resize the width of the <td>'s -->

            <td width="30%">
                <textarea style="width:100%; height:100%;"></textarea>
            </td>
            <td width="70%">
                <iframe style="width:100%; height:100%;" src=""></iframe>
            </td>
        </tr>
    </table>

</body>

Any help would be highly appreciated, thanks :)

R. Jones
  • 255
  • 2
  • 13

1 Answers1

0

Try this:

<!DOCTYPE html>
<html>
<style>
    td
    {
        position:relative;
    }
    .resizable
    {
        min-width:100%;
        min-height:100%;
        width:100%;
        height:100%;
        position:relative;
        display:inline-block;
        resize:both;
        overflow: hidden;
        border:1px solid blue;
        box-sizing: border-box;
    }
</style>
<body>
    <table width="100%">
        <tr>

        <!-- basically I want the user to be able to manually resize the width of the <td>'s -->
            <td style="width:30%">
                <div class="resizable"><textarea style="width:100%; height:100%;"></textarea></div>
            </td>
            <td style="width:70%">
                <div class="resizable"><iframe style="width:100%; height:100%;" src=""></iframe></div>
            </td>
        </tr>
    </table>
</body>
</html>

Demo

I just actually want to give you an idea.

What i did is simple, for every td you need to put a resizable div that has 100% size of that td, then put all the content inside the div. Every time you resize the div, the td will also resize according to the size of the div.

Just add more styling to suite your need.

VMcreator
  • 833
  • 8
  • 17
  • Thanks for this quick response - this is great! I was just wondering if there was anything more ergonomic (in a sense) kinda like codepen with the iframe and codemirrors [link] (http://codepen.io/calebduren/pen/waRmZp). Thanks for the help - it is highly appreciated :) – R. Jones Aug 03 '15 at 08:41
  • Actually there are lots of ways to achieve what you're trying to do. My answer is just only to give you the idea, to make it more elegant use jquery resizable on div's, this will also solve IE issue regarding resize:both in css. I think codepen also uses same approach. also check this: http://jsfiddle.net/euka4rm3/ its an answer from this:http://stackoverflow.com/questions/6156182/resizable-table-columns-with-jquery – VMcreator Aug 03 '15 at 09:10
  • This is great! Thanks for the help it is highly appreciated :) – R. Jones Aug 03 '15 at 12:13