/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Div Hidden Overflow Not Hiding

I have a div within a table cell, I am populating it with divs using php (a div based treeview). I’ve set the treeview’s parent div to an overflow of hidden. I am setting the table cell’s width using a drag and drop div, but the table cell stops shrinking when it gets to the treeview’s text. Shouldn’t the hidden allow the div to continue to shrink? I’ve adjusted my code for simplicity. Click the tall thin gray div, it will set the <td> to a width of 2px, but the treeview code seems to be forcing it to stay wider.

[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>
</hrml>
[/CODE]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERNov 22.2009 — ?

While I not sure what the problem is from your description,

have you tried changing the position:absolute to position:relative

in the id="splSplitter" <div> tag?

If that not what you want, could you further explain again

what should happen when you click on the gray line?
Copy linkTweet thisAlerts:
@baiguaiauthorNov 23.2009 — Sorry I wasn't clear. When the gray bar is clicked the left table cell should collapse to a width smaller than the 'treeview' text, since the tree's parent div has an overflow of hidden. But the text seems to be forcing all my divs to its width. I need to be able to dynamically collapse that table cell to as narrow as I want, cuz that gray bar (in my app) is actually a draggable bar for resizing the left panel. (I am building a help system like site)

I hope that makes more sense.
Copy linkTweet thisAlerts:
@JMRKERNov 23.2009 — I'm not sure about this (not a CSS expert), but i believe the overflow only controls the LOWER limit if the display, not the width.

You might try playing with the 'scroll' style or try asking on the CSS forum if you get no other reponses no the JS forum.
Copy linkTweet thisAlerts:
@baiguaiauthorNov 23.2009 — Good idea, I'll ask in the Css forums, I just posted here, thinking it is the dynamic width that is messing with my css.

Thanks!
Copy linkTweet thisAlerts:
@JMRKERNov 23.2009 — You're most welcome.

Hope it helps.

Post back here if you get a resolution as I'd like to know the final fix.

Good Luck!

?
×

Success!

Help @baiguai spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...