Search code examples
javascripthtmlcssjquery-uijquery-ui-multiselect

outerWidth() Returns a Different Value when Element is Hidden

I am trying to make some tweaks to the jQuery UI MultiSelect Widget.

One issue I'm having is that the main control is a little too wide after I refresh the control. Looking at the code, the width is set using:

var width = this.element.outerWidth();

Where this.element refers to my original <select> control, which has been hidden by the jQuery UI MultiSelect Widget.

Playing around with this, I can see that outerWidth() returns 424 when my <select> element is hidden, and it returns 406 when it is visible. (Note that width() also returns a larger value when the element is hidden.)

Does anyone know why or how the width would change depending on whether or not the control is visible? The value returned when the control is visible appears to be the correct value.

EDIT:

I have created a jsFiddle to demonstrate this.

Solution

  • You can't get the width of a display:none; element.

    You need to hide it with Position:absolute; and left:-999999px;.

    Here the css you need. Don't forget to put position:relative on the div wrapper.

    JsFiddle : http://jsfiddle.net/7xqk01oa/3/