This project is archived and is in readonly mode.

#146 ✓resolved

getDimensions() dont work on children elements of a display:none div

Reported by _reg | October 17th, 2009 @ 07:17 PM | in

When using getDimensions() on a children of a display:none div, it returns x:0, y:0. For it to work you have to remove it from the display:none parent div before being able to measure it

Moreover getDimensions() triggers a javascript error on IE6 : Object doesn't support this property or method on line :

var computed = this.getDocument().defaultView.getComputedStyle(this, null);

(getComputedStyle: function(property))

Comments and changes to this ticket

  • Fábio M. Costa

    Fábio M. Costa October 17th, 2009 @ 07:42 PM

    • Assigned user set to “Scott Kyle”

    Im just giving my opnion here but i think its not that simple. Removing the child element from the dom may return incorrect result as its parent element may be "dictating" the child dimensions.

    Ex: lets say you a have a div with width 200px and display none, and a child div with width 100%. If you use getDimensions() at the child div it will return x=0|y=0, ok, but if you remove it from the dom and measure it it will not give width 200px which is the correct result.

    Theres a plugin at Mootools-More called Element.measure that does this dou...

    The IE6 error should be inspected.

    Thanks for the report.

  • Scott Kyle

    Scott Kyle October 18th, 2009 @ 08:24 PM

    Fabio is right in that you can't reliably get the dimensions of a hidden node. As for your IE6 error, did you extend the element with (aka $) before calling getDimensions()? As in...;
  • Aaron Newton

    Aaron Newton October 20th, 2009 @ 07:00 PM

    • State changed from “new” to “open”
    • Milestone set to

    I'm inclined to mark this bug as invalid. You need to use Element.measure to measure hidden elements. Scott's intuition about your IE6 bug seems likely. Can you confirm? If not, can you make a example that throws the error (mooshell is running 1.2.4).

  • _reg

    _reg October 20th, 2009 @ 08:21 PM

    Element.measure does the job of measuring the element while it is a children of display:none div.

    The ie6 bug actually only occurs when trying getDimensions() on a children of a display:none div so as this method is useless in such case.. it is not that usefull to fix it...

    Thank you for your help.

    Note : the documentation is not very exhaustive regarding the difference between getDimensions and measure. Both can be used to measure hidden elts but only measure will work if the elt is hidden because its parent is hidden.

  • Fábio M. Costa

    Fábio M. Costa October 21st, 2009 @ 12:00 AM

    • Tag changed from getdimension, ie6 to docs, documentation, getdimension, unclear

    maybe the docs should be updated before closing the ticket as fixed

  • Scott Kyle

    Scott Kyle October 30th, 2009 @ 11:28 PM

    • Milestone changed from to
    • Assigned user cleared.

    I agree, let's fix the docs.

  • Aaron Newton

    Aaron Newton November 17th, 2009 @ 10:35 PM

    • State changed from “open” to “resolved”
    • Assigned user set to “Aaron Newton”

    I updated the docs in Element.Dimensions and sent a pull request to the core team:

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

People watching this ticket