Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#12232 closed bug (invalid)

outerWidth doesn't work properly in 1.8

Reported by: elclanrs@… Owned by: elclanrs@…
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?

Change History (24)

comment:1 Changed 7 years ago by 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...

comment:2 Changed 7 years ago by dmethvin

Owner: set to elclanrs@…
Status: newpending

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

comment:3 Changed 7 years ago by anonymous

comment:4 Changed 7 years ago by 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?

comment:5 Changed 7 years ago by anonymous

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

comment:6 in reply to:  5 Changed 7 years ago by 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...

comment:7 Changed 7 years ago by 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...

comment:8 Changed 7 years ago by 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.

comment:9 Changed 7 years ago by mikesherov

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?

comment:10 Changed 7 years ago by dmethvin

Keywords: needsdocs added

comment:11 Changed 7 years ago by anonymous

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

comment:12 Changed 7 years ago by anonymous

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

comment:13 Changed 7 years ago by dmethvin

You're using jQuery UI 1.8.22, right?

comment:14 Changed 7 years ago by 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.

comment:15 Changed 7 years ago by 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?

comment:16 Changed 7 years ago by anonymous

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

comment:17 Changed 7 years ago by dmethvin

Keywords: needsdocs removed

#10877 has the needsdocs

comment:18 Changed 7 years ago by 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.

comment:19 Changed 7 years ago by mikesherov

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

comment:20 in reply to:  19 Changed 7 years ago by 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.

comment:21 in reply to:  15 Changed 7 years ago by lovemoon@…

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.

comment:22 Changed 6 years ago by 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.

comment:23 in reply to:  22 Changed 6 years ago by 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.

comment:24 Changed 6 years ago by zyorg@…

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.

Note: See TracTickets for help on using tickets.