[jQuery] Get width of element after resizing it

Question

Hello,

Is it possible to get the size of an element after resizing it using $(el).css()?

My code is:

function resize() {
    $(".combobox").css('width', '100%');
    var width = $(".combobox").width();
}

I've get the real value of the combobox only after calling the function a second time. The first time is gets the width before executing $(".combobox").css('width', '100%');

I suppose this is fault of the DOM not being recreated after the .css(). Is there any way to force DOM reloading?

Thanks in advance!

Answer 1

Try chaining the two functions:

function resize() {
    var width = $(".combobox").css('width', '100%').width();
}

Answer 2

Try putting the part of the code that gets the width in a timer scheduled for 1 millisecond...

The browser won't do the resize calculation while the script is executing. If you schedule a timer and exit the JS function, the browser will update the state of all the DOM elements that changed, and then launch the timer, so by then the width of your combobox has updated.

I used something very similar in a GWT based webpage

This trick works not only for JS but in many GUI frameworks, which do layout in a delayed way.