Bug Tracker

Ticket #125 (closed bug: invalid)

Opened 8 years ago

Last modified 3 years ago

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

Reported by: dave.methvin@… Owned by:
Priority: undecided Milestone:
Component: ajax Version:
Keywords: "" Cc: ""
Blocking: Blocked by:

Description

Given this HTML:

<div id="outer" style="display:none">
  <div id="inner" style="width:10px; height:11px"> </div>
</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

comment:1 Changed 8 years ago by john

  • Status changed from new to closed
  • Version set to 1.0
  • Resolution set to wontfix
  • Milestone set to 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 8 years ago by joern

  • Priority set to blocker
  • Resolution set to invalid
  • Status changed from reopened to closed
  • Component set to ajax
  • Type set to bug

SPAMPOLICE

Note: See TracTickets for help on using tickets.