Problem/Motivation

There is visual BUG in progress bar when the status is 0%. The progress bar looks like it is broken or something.

There is also "dropping out" visual mistake if percentage goes over 100%.

Proposed resolution

The solution is to add overflow: hidden; to the .progress_track class.

CommentFileSizeAuthor
#38 Screenshot 2020-08-04 at 11.55.20 AM.png130.16 KBsamiullah
#38 Screenshot 2020-08-04 at 11.54.56 AM.png136.78 KBsamiullah
#35 2254785-35.patch979 byteskomalk
#35 progress-bar-with-1%.png12.67 KBkomalk
#35 progress-bar-with-3%.png13.81 KBkomalk
#14 progress-bar-2254785-14.patch385 byteslewisnyman
#4 progress-bar-2254785-4.patch435 byteslewisnyman
#3 progress-bar-over-100-percentage-bug---fixed.png22.76 KBdraganeror
#3 progress-bar-0-percentage-bug---fixed.png5.01 KBdraganeror
#2 progress-bar-2254785-2.patch509 bytesdraganeror
progress-bar-over-100-percentage-bug.png15.65 KBdraganeror
progress-bar-0-percentage-bug.png5.07 KBdraganeror

Comments

draganeror’s picture

draganeror
Primary language Serbian
Location Novi Sad
commented
Assigned: Unassigned » draganeror
Issue summary: View changes

Will take care of it...

draganeror’s picture

draganeror
Primary language Serbian
Location Novi Sad
commented
Status: Active » Needs review
StatusFileSize
new progress-bar-2254785-2.patch509 bytes

Here is the patch.

draganeror’s picture

draganeror
Primary language Serbian
Location Novi Sad
commented
StatusFileSize
new progress-bar-0-percentage-bug---fixed.png5.01 KB
new progress-bar-over-100-percentage-bug---fixed.png22.76 KB

Here are screenshots after patch is applied...

lewisnyman’s picture

lewisnyman
he/him
commented
StatusFileSize
new progress-bar-2254785-4.patch435 bytes

I swear we had a min width for the progress a one point... anyway I've added a min and max width so this can never happen again. Thanks for the report.

rodrigoaguilera’s picture

rodrigoaguilera
Primary language Spanish
Location Madrid
commented
Status: Needs review » Reviewed & tested by the community

I tested this by inserting this html

<div class="progress__track" style=""><div class="progress__bar" style="width: 0%;"></div></div>

and playing with the width

everything looks as it should

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 4: progress-bar-2254785-4.patch, failed testing.

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs work » Needs review

4: progress-bar-2254785-4.patch queued for re-testing.

rodrigoaguilera’s picture

rodrigoaguilera
Primary language Spanish
Location Madrid
commented
Status: Needs review » Reviewed & tested by the community

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 4: progress-bar-2254785-4.patch, failed testing.

rodrigoaguilera’s picture

rodrigoaguilera
Primary language Spanish
Location Madrid
commented
Status: Needs work » Needs review

4: progress-bar-2254785-4.patch queued for re-testing.

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs review » Reviewed & tested by the community

Setting back to RTBC post broken HEAD

dries’s picture

dries commented
Status: Reviewed & tested by the community » Fixed

Committed to 8.x. Thanks.

Bojhan’s picture

Bojhan commented
Status: Fixed » Needs work

It looks like this broke something else, initializing is now at 100% - this should be at 1%

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs work » Needs review
StatusFileSize
new progress-bar-2254785-14.patch385 bytes 
+++ b/core/modules/system/css/system.module.css
@@ -206,7 +206,8 @@ table.sticky-header {
-  width: 3%;

We shouldn't of removed the initial width setting because that's how the batch api works, here's a patch that adds it back.

Bojhan’s picture

Bojhan commented

Hmm, interesting - could we try this with 1% and/or 2% it seems like the 3% is a little bit too much for an initial state.

draganeror’s picture

draganeror
Primary language Serbian
Location Novi Sad
commented

Before you do that test how it looks 1% width on 320px wide screen. If necessary maybe good option is to start at 3% for mobiles and use media query to set 1% on bigger screens.

Bojhan’s picture

Bojhan commented

That part shouldn't be affected by mobile width. That doesn't change the roundness?

berdir’s picture

berdir
Primary language German
Location Switzerland
commented

Keep in mind that we are using the progress bar in two very different ways here. One is core/batch API, which is dynamic and if batch API already treats "batch started" as 3% or something then that might make totally sense for it.

The screenshot however is from Search API, which uses the progress bar as a static information to tell you, how many of your nodes or whatever have been indexed already, it does *not* change while you look at that page and if none are indexed, then it is 0%. not 1% or 3% but 0% :)

Seems to me as a backend developer that we should either make the way we display it in core batch API specific and use an additional css class from a batch wrapper or something so that it only applies there or we should simply override it in Search API to behave the way we want it to... like being a static instead of moving, which is still being discussed in corresponding Search API issue ;)

draganeror’s picture

draganeror
Primary language Serbian
Location Novi Sad
commented

Yes, there is also way to leave it 0% by adding overflow: hidden; CSS property.
Like it is in patch from #2254785-2: Progress bar 0% or over 100% visual BUG
You can see results by looking screenshots in #2254785-3: Progress bar 0% or over 100% visual BUG

Bojhan’s picture

Bojhan commented

Actually for Search API , you would want a "static" bar the one we have animates. I think there is already an open issue for that.

I'd like to still push this to 2 or 1%.

jhedstrom’s picture

jhedstrom
Primary language English
Location Portland, OR
commented
Status: Needs review » Needs work

Needs work based on #20.

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +frontend, +CSS

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

  • Dries committed 6665d2e on 8.3.x 
    Issue #2254785 by LewisNyman, Dragan Eror: Fixed Progress bar 0% or over...

  • Dries committed 6665d2e on 8.3.x 
    Issue #2254785 by LewisNyman, Dragan Eror: Fixed Progress bar 0% or over...

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

  • Dries committed 6665d2e on 8.4.x 
    Issue #2254785 by LewisNyman, Dragan Eror: Fixed Progress bar 0% or over...

  • Dries committed 6665d2e on 8.4.x 
    Issue #2254785 by LewisNyman, Dragan Eror: Fixed Progress bar 0% or over...

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

komalk’s picture

komalk commented
Status: Needs work » Needs review
StatusFileSize
new progress-bar-with-3%.png13.81 KB
new progress-bar-with-1%.png12.67 KB
new 2254785-35.patch979 bytes

Patch #14 is failed to apply to 8.9x.

Actually for Search API , you would want a "static" bar the one we have animates. I think there is already an open issue for that.
I'd like to still push this to 2 or 1%.

Change it from 3% to 1%.
Attached screenshot for the reference.

samiullah’s picture

samiullah commented

@komalkolekar please add steps to test this one on clean install of drupal 8.9x

komalk’s picture

komalk commented

Step to reproduced mentioned in #5
https://www.drupal.org/project/drupal/issues/2254785#comment-8787351

samiullah’s picture

samiullah commented
StatusFileSize
new Screenshot 2020-08-04 at 11.54.56 AM.png136.78 KB
new Screenshot 2020-08-04 at 11.55.20 AM.png130.16 KB

Looks good

Applied patch #35

Can be moved to RTBC if no more code review is needed

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev
quietone’s picture

quietone commented
Version: 9.3.x-dev » 8.0.x-dev
Assigned: draganeror » Unassigned
Status: Needs review » Fixed

This was committed in #12 do Drupal 8.x, re-opened because of a regression. That regression was fixed in #2486431: Progress bar starts at 100%. But this stayed open and was set to NW for #20, which doesn't match the title or the scope. And to avoid two commits for the same issue number I am moving the follow on work toa new issue.

New issue created, #3270657: Reduce the min-width and width for the progress bar and credit moved there. Restoring meta data to when this was fixed.

Cheers.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.