outerWidth doesn't work properly in 1.8

[[email protected]…]

So I just tried 1.8 in this project I'm working on and it seems like it screws up the adjustment of the labels:

(1.7) ​http://elclanrs.github.com/jq-idealforms/
(1.8) ​http://spacirdesigns.com/jqidealforms/

I've been trying to set up a fiddle but I can't seem to reproduce my problem. I looked into the jQuery 1.8 source for outerWidth and it seems there are some major changes compared to 1.7.

This is the function that calculates the width:

  getMaxWidth: function ($elms) {
    var maxWidth = 0
    $elms.each(function() {
      var width = $(this).outerWidth()
      if (width > maxWidth) {
        maxWidth = width
      }
    })
    return maxWidth
  }

After a couple hours I found out that if I use width instead of outerWidth then it works fine in 1.8. I'm assuming it works because in my css I'm using box-sizing: border-box...

So what's going on with outerWidth? Why is it not behaving the same as in 1.7?

[anonymous]

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...

[dmethvin]

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

[anonymous]

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

[dmethvin]

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?

[anonymous]

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

[anonymous]

Replying to 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...

[anonymous]

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...

[anonymous]

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.

[mikesherov]

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?

[anonymous]

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

[anonymous]

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

[dmethvin]

You're using jQuery UI 1.8.22, right?

[anonymous]

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.

[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?

[anonymous]

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

[dmethvin]

#10877 has the needsdocs

[anonymous]

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.

[mikesherov]

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

[anonymous]

Replying to 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.

[[email protected]…]

Replying to 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.

[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.

[HenkV]

Replying to 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.

[[email protected]…]

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.