www.webdeveloper.com
Results 1 to 8 of 8

Thread: Hidden Overflow and Dynamically Resized Parent Node

Hybrid View

  1. #1
    Join Date
    Apr 2007
    Posts
    8

    Hidden Overflow and Dynamically Resized Parent Node

    I am building a help system-like website and I am using a two column table to handle the treeview in the left and the content in the right. I have asked this in the javascript forums (due to the dynamic width) and they suggested I post here. In the left cell I am generating a treeview using divs. These are housed in a 'wrapper' div tag. I am building a resizer that shrinks the width of the treeview's table cell width - but the treeview wrapper div is enforcing its width even though I have it set to overflow: hidden. - Below is a sample, when clicking on the gray vertical bar SHOULD set the cell to a few px, but you can see it is held out to the width of the tree's caption. (I'm testing in FF btw)

    Code:
    <html>
      <body>
        <table id="tblMain" border="1" style="width: 100%;">
    	<tr>
    	    <td style="vertical-align: top; width: 200px;">
    		<div id="splSplitter" onclick="this.parentNode.style.width='2px'" style="height: 400px; cursor: e-resize; position: absolute; z-index: 100; width: 4px; left: 250px; background: #dfdfdf;"></div>
    		<div style="overflow: hidden;">
    		  <div id="divEdit"><a href="javascript:EditTree()">Edit Tree</a><br><br></div>
    		  <div id="divTree"><div id="divFld_1" class="tvwFolder" onclick="ToggleFolder('1');">Documents</div><div id="divFldDiv_1" class="tvwFolderDiv" style="display: none;"></div>
    		</div>
    	    </td>
    	    <td style="vertical-align: top;">
    		<div id="divBody"></div>
    	    </td>
    	</tr>
        </table>
      </body>
    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    live example somewhere?
    without the javascript and the rest of the css, it's a little difficult to imagine what is going on.
    ...but stupidity is terminal.

  3. #3
    Join Date
    Apr 2007
    Posts
    8
    I'll put something up Wednesday night and post the url here.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Too many divs. What's the purpose of

    Code:
    <div style="overflow: hidden;">
    why not overflow: hidden on your table cell?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Apr 2007
    Posts
    8
    The overflow: hidden is there to demonstrate how my cell is being forced to the width of the text in the 'treeview' even though it should be hidden etc. I need that table cell to collapse all the way. The onclick above:
    Code:
    onclick="this.parentNode.style.width='2px'"
    Should collapse it to 2 pixels but when I click that, it seems to stop at the caption's width. This will be a resizable panel in my UI, like a help system, so the user should be able to reduce it narrower than the treeview, but I can't get it to do that.

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    Did you try overflow:hidden on your table cell while removing the div tag?

    (Removing the div tag here wouldn't accomplish or not accomplish anything, it's just not necessary to have there, in my opinion).
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  7. #7
    Join Date
    Apr 2007
    Posts
    8
    I just tried setting the <td> to hidden overflow and removed the div, but the cell is still being forced to the width of my text. I must be missing something here, I thought the idea of overflow:hidden is to allow the content's parent to be narrower than the content itself. I have taken the code above and changed the left table cell to a width of 2px and an overflow of hidden, and the cell is still rendered at the same width as the text. If I do that same with a <div> THEN it works.

    So I guess my question is, is there some way to get a table cell to treat overflow like a div tag does? I really don't want to have to use frames just to build a help system style UI, and using a divs only layout (as far as I know) would require me to set exact widths on the divs so I can use a float: left without the divs wrapping. I want the layout to be 'full bleed'.

    Thank you all very much for your time, thoughts and suggestions so far!

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    Well, if you're exploring changing your code, then a table is not the way to go. You're making a tree, so the whole thing should be based on UL.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles