OuterWidth () Returns a different value when the element is hidden
I am trying to make some changes to the jQuery UI MultiSelect Widget .
One problem I'm running into is that the main control is slightly wider after updating the control. Looking at the code, the width is set with:
var width = this.element.outerWidth();
Where this.element
refers to my original control <select>
which was hidden by the MultiSelect JQuery UI widgets.
Playing with this I see that it outerWidth()
returns 424 when my element <select>
is hidden and it returns 406 when it is visible. (Note that it width()
also returns a larger value when the element is hidden.)
Does anyone know why and how the width will change depending on whether the control is visible visible? The value returned when the control is visible is the correct value.
EDIT:
I've demonstrated this with jsFiddle .
source to share
You cannot get the width of the element display:none;
.
You need to hide it with Position:absolute;
and left:-999999px;
.
You need css here. Don't forget to position:relative
wrap the div.
JsFiddle: http://jsfiddle.net/7xqk01oa/3/
source to share