Just to be more precise the problem is that outerWidth gives me a value of 0 but width gives me the correct value. In guess in this particular case the values of outerWidth and width must be the same because I'm using box-sizing: border-box. Still jQuery 1.8 misbehaves here, don't know why...

Can you reduce that down to a small test case? One in jsfiddle.net or jsbin.com would be ideal.

I've being trying to but I can't reproduce it in jsFiddle.

I can point out the important pieces of code. Hope this helps:

JavaScript:

(1) getMaxWidth utility https://github.com/elclanrs/jq-idealforms/blob/master/js/utils.js#L11

(2) The labels object https://github.com/elclanrs/jq-idealforms/blob/master/js/jquery.idealforms.js#L50

(3) Adjust https://github.com/elclanrs/jq-idealforms/blob/master/js/jquery.idealforms.js#L237

CSS:

(1) https://github.com/elclanrs/jq-idealforms/blob/master/less/form.less#L44

I should have noticed this earlier, but there was so much code it got lost:

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.min.js

As the blog post says,

jQuery core 1.8.0 is compatible with the latest versions of jQuery UI (1.8.22), and jQuery Mobile (1.1.1). Be sure to update those if you’re reporting bugs on pages that involve them.

Can you update your UI and see if it works?

Wow, it works! I missed that. Thank you for your help.

Replying to [comment:5 anonymous]:

Wow, it works! I missed that. Thank you for your help.

It turns out this solved the issue with the labels, but I still have issues with outerWidth. The date calendar won't get the right width now. Take a look:

(1.7 + 1.8.22) http://elclanrs.github.com/jq-idealforms/

(1.8 + 1.8.22) http://spacirdesigns.com/jqidealforms/

I tracked down the problem to this line:

https://github.com/elclanrs/jq-idealforms/blob/master/js/jquery.idealforms.js#L285

I tried with width but there's still some miscalculation and it doesn't align properly. I put console.log(w) to check the width before applying it and it gives me the correct value 225, but then when it applies it with t.datepicker('widget').width(w) and I check in devtools the actual width reported is 246 WTH?. Again, I haven't changed any code, this happens by just switching from 1.7 to 1.8. In 1.7 works just fine with jQuery UI 1.8.22.

Any ideas? Where is the problem? Something is going on...

Ok, I found a fix. If I set the width with css() instead of width() then it works. t.datepicker('widget').css('width', w)

So I suspect this must be a bug with width() and box-sizing: border-box...

I've been doing some more tests and everything seems to be working fine with outerWidth. According to the bug reporting guidelines I understand I should probably post this as a different bug since it's not related to outerWidth anymore. This non-bug can be closed I guess, my bad didn't see that about jQuery UI compatibility. It's nice that the new code for those shortcuts is much shorter, and I didn't experience any other problems with outerWidth since I updated jQuery UI to latest version.

In 1.8, .css('width') respects box-sizing, and .width() does not (always returning content width). This is so animations work correctly with border-box, and so that the API description of these functions are more accurate.

@dmethvin, perhaps that's needsdocs?

for me node.outerWidth(true) returns nodelist instead of width including margin.

For me, outerWidth function in 1.8 returns jQuery object rather than number

You're using jQuery UI 1.8.22, right?

I am using jQuery UI 1.8.21.

After upgrade from jQuery 1.7.2 to 1.8.0, outerWidth() started returning object rather than numeric value.

This ticket was closed. Does it mean the function outerWidth works correctly? My code (not jquery UI) use outerWidth a lot and now it doesn't work correctly after upgrading to jquery 1.8.0. I noticed that, if calling outerWidth() (omitting the parameter), it will return an object (jQuery object I guess). If calling outerWidth(true), it will return a number.

What is the replacement of outerWidth() in jquery 1.8.0?

Thanks for the heads up about jquery-ui. Updating fixes my setup.

#10877 has the needsdocs

I noticed the same issue, it seems that for some DOM elements outerWidth() returns a number, but for some it returns an object. I haven't tried to figure out when each case happens. But this bug should not be closed, since the issue with outerWidth() remains.

anonymous, please read the comments above, and you'll see why it's closed.

Replying to [comment:19 mikesherov]:

anonymous, please read the comments above, and you'll see why it's closed.

I correct what I said in comment 18, I found that jquery-ui-1.8.16 overwrites outerWidth() function, after i upgrade to jquery-ui-1.8.23 it works.

Replying to [comment:15 Bao]:

This ticket was closed. Does it mean the function outerWidth works correctly? My code (not jquery UI) use outerWidth a lot and now it doesn't work correctly after upgrading to jquery 1.8.0. I noticed that, if calling outerWidth() (omitting the parameter), it will return an object (jQuery object I guess). If calling outerWidth(true), it will return a number. What is the replacement of outerWidth() in jquery 1.8.0?

yes,I got the same problem,and I found sometimes outerWidth return a jquery object.

Tried to upgrade to 1.9.3 from 1.7.1 and things started to go wrong.

It appeared that outerWidth() did return a jquery object where outerWidth(true) returned the number.

Replying to [comment:22 HenkV]:

Tried to upgrade to 1.9.3 from 1.7.1 and things started to go wrong. It appeared that outerWidth() did return a jquery object where outerWidth(true) returned the number.

Typo, it was 1.8.3

Further, with outerWidth(false) it also gives the correct answer. Only if you ommit the parameter the result is wrong.

the issue is still present in 1.9.1

outerWidth() and outerHeight() return jQuery object if you omit the parameter.

using outerWidth(false) seems to give the correct value result.