Bug Tracker

Opened 16 years ago

Closed 16 years ago

Last modified 11 years ago

#125 closed bug (invalid)

Nested in display:none gives width()/height()=0

Reported by: [email protected] Owned by:
Priority: undecided Milestone:
Component: ajax Version:
Keywords: "" Cc: ""
Blocked by: Blocking:


Given this HTML:

<div id="outer" style="display:none">
  <div id="inner" style="width:10px; height:11px"> </div>
  • $("#inner").width() returns 0
  • $("#inner").css("width") returns "10px"
  • $("#inner").css("display") returns "block"

If #outer is display:block then #inner returns width()==10. It looks like (in IE6/FF at least) any display:none parent causes width()/height() to return 0. There is a workaround in $.css for the element itself being display:none but since #inner returns display:block it's not in play.

The only fix I can see to return the actual width()/height() is to crawl up the entire tree looking for display:none elements, temporarily setting them all to display:block. If this was implemented I think it would be best to make it optional and require a boolean to request tree spelunking: $("#inner").height(true). Maybe it would be best to just document the behavior as it currently is?

Change History (2)

comment:1 Changed 16 years ago by john

Milestone: 1.0
Resolution: wontfix
Status: newclosed
Version: 1.0

This is due to the fact that browsers won't report a valid width and height for elements that have a display: none. The fix for this is to use .css() - .width() uses .curCSS(), which is quite different.

curCSS returns the current value of the element. css returns the optimal value of the element (e.g. the full height, even though the element isn't visible).

So, long story short, if you need the full height/width - please use .css("height")/.css("width").

comment:2 Changed 16 years ago by joern

Component: ajax
Priority: blocker
Resolution: invalid
Status: reopenedclosed
Type: bug


Note: See TracTickets for help on using tickets.