#12232 closed bug (invalid)
outerWidth doesn't work properly in 1.8
Reported by: | Owned by: | ||
---|---|---|---|
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 11 years ago by
comment:2 Changed 11 years ago by
Owner: | set to [email protected]… |
---|---|
Status: | new → pending |
Can you reduce that down to a small test case? One in jsfiddle.net or jsbin.com would be ideal.
comment:3 Changed 11 years ago by
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
comment:4 Changed 11 years ago by
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 follow-up: 6 Changed 11 years ago by
Wow, it works! I missed that. Thank you for your help.
comment:6 Changed 11 years ago by
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 11 years ago by
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 11 years ago by
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 11 years ago by
Component: | unfiled → css |
---|---|
Priority: | undecided → high |
Resolution: | → invalid |
Status: | pending → closed |
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 11 years ago by
Keywords: | needsdocs added |
---|
comment:11 Changed 11 years ago by
for me node.outerWidth(true) returns nodelist instead of width including margin.
comment:12 Changed 11 years ago by
For me, outerWidth function in 1.8 returns jQuery object rather than number
comment:14 Changed 11 years ago by
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 follow-up: 21 Changed 11 years ago by
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 10 years ago by
Thanks for the heads up about jquery-ui. Updating fixes my setup.
comment:18 Changed 10 years ago by
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 follow-up: 20 Changed 10 years ago by
anonymous, please read the comments above, and you'll see why it's closed.
comment:20 Changed 10 years ago by
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 Changed 10 years ago by
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 follow-up: 23 Changed 10 years ago by
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 Changed 10 years ago by
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 10 years ago by
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.
Just to be more precise the problem is that
outerWidth
gives me a value of0
butwidth
gives me the correct value. In guess in this particular case the values ofouterWidth
andwidth
must be the same because I'm usingbox-sizing: border-box
. Still jQuery 1.8 misbehaves here, don't know why...