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 3 of 3

Thread: DIVs RESIZE TD

  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIVs RESIZE TD

    Hello there.. This time Google didn't help me much on this:

    There are several divs in a td, but only one of them is displayed at a time (display:inline), the other having display:none for style. It would be nice if the td (table) didn't resize when switching between divs, but keep the size of the first displayed div. Then, if a div was bigger it would become scrollable.


    I tried lots of combinations of height, min-height, max-height, clientHeight, overflow:auto, table-layout:fixed, size capture on body load etc., but it didn't work out as planned..

    Thanks for any advice.

    Dani.

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    If you posted some code that got you close we might be able to tweak it.

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK.. Here is an experiment:

    <table>
    <tr>
    <td>
    <div id="div1" style="width:100;height:100;overflow:auto;display:none">
    1<br>
    2<br>
    </div>
    <div id="div2" style="width:100;height:100;overflow:auto">
    % for my $i (1..20) {
    <% $i %><br>
    % }
    </div>
    </td>
    </tr>
    <table>

    <script type="text/javascript">
    function s() {
    document.getElementById("div1").style.display = "inline";
    document.getElementById("div2").style.display = "none";
    }
    </script>

    <input type="button" value="Switch" onclick="return s()" />

    There are 2 divs: div1 and div2 by their IDs. Each is set "width:100;height:100;overflow:auto", but only div2 is displayed. div2 contains the numbers from 1 to 20 each on a separate line, while div1 contains 1<BR>2. When the page loads div2 is indeed 100 x 100 with scroll bars to accommodate the long list. When I click the "Switch" button to display div1 instead and hide div2, div1 is resized to fit 1<BR>2 perfectly, being much less than 100 x 100.

    If, on the other hand, I display div1 first it is 100 x 100. But when switching to div2 it gets more than 100 x 100 without scroll bars..

    So.. Is it possible that the javascript code (switch) is faulty? or do I have to add smth.?

    I just realized that this works fine in IE, while I'm usually using firefox..


  •  

    Posting Permissions

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