#9262 closed bug (notabug)

Opened April 29, 2013 08:22PM UTC

Closed August 30, 2013 12:33PM UTC

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/

Attachments (0)
Change History (7)

Changed April 30, 2013 02:01AM UTC by tj.vantoll comment:1

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

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.

Changed April 30, 2013 02:03AM UTC by scottgonzalez comment:2

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

Changed August 30, 2013 03:14AM UTC by k_borchers comment:3

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.

Changed August 30, 2013 12:26PM UTC by scottgonzalez comment:4

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.

Changed August 30, 2013 12:30PM UTC by scottgonzalez comment:5

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.

Changed August 30, 2013 12:30PM UTC by scottgonzalez comment:6

status: reopened → open

Changed August 30, 2013 12:33PM UTC by scottgonzalez comment:7

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