Skip to main content

Bug Tracker

Side navigation

#12232 closed bug (invalid)

Opened August 09, 2012 11:07PM UTC

Closed August 10, 2012 12:09PM UTC

Last modified March 05, 2013 11:22AM UTC

outerWidth doesn't work properly in 1.8

Reported by: elclanrs@gmail.com Owned by: elclanrs@gmail.com
Priority: high Milestone: None
Component: css Version: 1.8.0
Keywords: Cc:
Blocked by: Blocking:
Description

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?

Attachments (0)
Change History (24)

Changed August 09, 2012 11:15PM UTC by anonymous comment:1

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

Changed August 09, 2012 11:31PM UTC by dmethvin comment:2

owner: → elclanrs@gmail.com
status: newpending

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

Changed August 10, 2012 12:41AM UTC by anonymous comment:3

Changed August 10, 2012 03:37AM UTC by dmethvin comment:4

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?

Changed August 10, 2012 03:43AM UTC by anonymous comment:5

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

Changed August 10, 2012 05:31AM UTC by anonymous comment:6

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

Changed August 10, 2012 07:11AM UTC by anonymous comment:7

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

Changed August 10, 2012 07:46AM UTC by anonymous comment:8

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.

Changed August 10, 2012 12:09PM UTC by mikesherov comment:9

component: unfiledcss
priority: undecidedhigh
resolution: → invalid
status: pendingclosed

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?

Changed August 10, 2012 01:40PM UTC by dmethvin comment:10

keywords: → needsdocs

Changed August 10, 2012 06:45PM UTC by anonymous comment:11

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

Changed August 10, 2012 10:10PM UTC by anonymous comment:12

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

Changed August 10, 2012 10:11PM UTC by dmethvin comment:13

You're using jQuery UI 1.8.22, right?

Changed August 10, 2012 10:23PM UTC by anonymous comment:14

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.

Changed August 12, 2012 09:24AM UTC by Bao comment:15

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?

Changed August 13, 2012 11:21AM UTC by anonymous comment:16

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

Changed August 16, 2012 02:32PM UTC by dmethvin comment:17

keywords: needsdocs

#10877 has the needsdocs

Changed August 16, 2012 09:11PM UTC by anonymous comment:18

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.

Changed August 16, 2012 09:36PM UTC by mikesherov comment:19

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

Changed August 16, 2012 10:23PM UTC by anonymous comment:20

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.

Changed August 20, 2012 09:41AM UTC by lovemoon@yeah.net comment:21

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.

Changed December 30, 2012 10:28PM UTC by HenkV comment:22

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.

Changed December 30, 2012 10:31PM UTC by HenkV comment:23

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.

Changed March 05, 2013 11:22AM UTC by zyorg@ukr.net comment:24

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.