Hidden Overflow and Dynamically Resized Parent Node

This site is best viewed in a modern browser with JavaScript enabled.

Hidden Overflow and Dynamically Resized Parent Node

baiguai

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)

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

opifex

live example somewhere?
without the javascript and the rest of the css, it's a little difficult to imagine what is going on.

baiguai

I'll put something up Wednesday night and post the url here.

aj_nsc

Too many divs. What's the purpose of

<div style="overflow: hidden;">

why not overflow: hidden on your table cell?

baiguai

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:

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.

aj_nsc

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

baiguai

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!

aj_nsc

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.