Opened 6 years ago

Closed 6 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 6 years ago by tj.vantoll

Component: ui.coreui.progressbar
Status: newopen
Summary: Progress bar widget displays inaccurately when the box-sizing:border-box; is in useProgressbar: 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.

comment:2 Changed 6 years ago by Scott González

.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 6 years ago by k_borchers

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 6 years ago by Scott González

Resolution: wontfix
Status: openclosed

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 6 years ago by Scott González

Resolution: wontfix
Status: closedreopened

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 6 years ago by Scott González

Status: reopenedopen

comment:7 Changed 6 years ago by Scott González

Resolution: notabug
Status: openclosed

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

Note: See TracTickets for help on using tickets.