Opened 10 years ago
Closed 9 years ago
#9262 closed bug (notabug)
Progressbar: Inaccurate width of value bar when box-sizing:border-box; is in use
Reported by: | kpturner | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.progressbar | Version: | 1.10.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
As described above, when box-sizing:border-box; is in use then changes to a progress bar value is not accurately reflected in the widget. For example, a standard progress bar set to 50% will actually show a bar that is greater than 50% wide. In some instances the difference can be quite large and noticeable. The suggested fix may be to set the width using .outerWidth() rather than .width()
Here is a jsFiddle: http://jsfiddle.net/kpturner/EkvJw/
Change History (7)
comment:1 Changed 10 years ago by
Component: | ui.core → ui.progressbar |
---|---|
Status: | new → open |
Summary: | Progress bar widget displays inaccurately when the box-sizing:border-box; is in use → Progressbar: Inaccurate width of value bar when box-sizing:border-box; is in use |
comment:2 Changed 10 years ago by
.width()
respects box-sizing
in newer jQuery releases, so .width()
and .css( "width" )
can now behave differently. .outerWidth()
is the correct thing to use. This will continue to crop up in various places for a while ;-)
comment:3 Changed 9 years ago by
I think this may actually be on its way to being fixed with latest core. I changed the fiddle to pull from our CDN which seems to be different (newer) than what jsFiddle calls "Edge". Then I changed the fiddle to wait for the dom to be ready and now the value is correct. http://jsfiddle.net/5F87q/3/ It's also correct if you remove the box-sizing http://jsfiddle.net/5F87q/4/
I believe this is related to http://bugs.jquery.com/ticket/14084 so I think when that is fixed, this should be fixed.
comment:4 Changed 9 years ago by
Resolution: | → wontfix |
---|---|
Status: | open → closed |
In that case, I'd like to just close this as won't fix, because I don't ever want to work around box sizing issues in UI.
comment:5 Changed 9 years ago by
Resolution: | wontfix |
---|---|
Status: | closed → reopened |
Hmm...no, this is still wrong. We always have to use .outerWidth()
as I mentioned earlier. Also, I'm still seeing 52% using jquery-git2.
comment:6 Changed 9 years ago by
Status: | reopened → open |
---|
comment:7 Changed 9 years ago by
Resolution: | → notabug |
---|---|
Status: | open → closed |
Ah, it was the DOM ready change in your fiddle that made it work. Note that there are 2 edge versions (1.x and 2.x), they both work properly when waiting for the DOM to be ready. So there is a bug here, but it's not related to box-sizing (at least not with respect to jQuery UI).
Updated the test case to be against master: http://jsfiddle.net/tj_vantoll/5F87q/ and confirmed that that it only occurs when
box-sizing: border-box;
is used.This is strange. I've stepped into the code and for this test case and we're attempting to set a width of
"50%"
here: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.progressbar.js#L119. Yet, a width of {{{"52%"}}] gets set on the element instead. This might be a core bug but I'm having trouble figuring out exactly what's up here.