Get the size of an element when inside a display:none parent

Question

I'm trying to get the width of an element which will be shown in a jquery-ui dialog.

The dialog is set to display:none on load. This is not allowing me to get the width.

Do I need to show it, get the width and hide it again immediately to get the width? Or is there some other option I'm not aware of?

Thanks

Answer 1

You have two options:

• If your jquery-ui dialog must be display:none, the only way to get dimensions of its child is show/get_dimensions/hide.
• If you can set it to visibility:hidden, then there is nothing to do: just get the dimensions.

However, setting a jquery-ui container to visibility:hidden is not a good thing as it could modify the whole behaviour of the system. There is maybe a test for display:none somewhere in the jquery-ui-dialog script, and modifying it using visibility would break this test. Additionally, if there isn't, nothing ensures that there won't be any in the future versions of jquery-ui.

To quickly get the dimensions with the first solution, please refer to this answer.

---

The Mootools-more Element.measure solution:

Mootools implement the show/measure/hide technique in Mootools-more's Element.measure. The raw code wouldn't work with jQuery as Mootools directly extends elements instead of giving a framework wrapper, but you can easily adapt it for your purpose.