3

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

Matthew Grima
  • 1,513
  • 5
  • 25
  • 40

1 Answers1

2

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.

Community
  • 1
  • 1
ldiqual
  • 15,015
  • 6
  • 52
  • 90
  • is the position absolute needed to take the element outside of the flow? – Matthew Grima Jun 10 '12 at 10:40
  • In the link you gave me, the answer uses position absolute. why is it needed? – Matthew Grima Jun 10 '12 at 10:44
  • Well I don't know why the absolute position is needed, I were you I would just play with the `visibility` and `display` properties. I'll edit my answer with the Mootools `measure` code. – ldiqual Jun 10 '12 at 11:05
  • By the way, Mootools-more's Element.mesure also sets the element style to `position:absolute`. I don't know why, but if someone has an explanation... – ldiqual Jun 10 '12 at 11:12
  • The use of absolute position allows the dimensions of the element to be obtained without affecting the layout or size of the page. The element is placed invisibly at the top-left corner of the page, without disrupting the rest of the content. – Matt Coughlin Jun 11 '12 at 01:06