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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Dragan Eror’s picture

Assigned: Unassigned » Dragan Eror
Issue summary: View changes

Will take care of it...

Dragan Eror’s picture

Status: Active » Needs review
FileSize
509 bytes

Here is the patch.

Dragan Eror’s picture

Here are screenshots after patch is applied...

LewisNyman’s picture

FileSize
435 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

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

Status: Needs work » Needs review

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

rodrigoaguilera’s picture

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

Status: Needs work » Needs review

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

LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community

Setting back to RTBC post broken HEAD

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to 8.x. Thanks.

Bojhan’s picture

Status: Fixed » Needs work

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

LewisNyman’s picture

Status: Needs work » Needs review
FileSize
385 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

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.

Dragan Eror’s picture

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

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

Berdir’s picture

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

Dragan Eror’s picture

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

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

Status: Needs review » Needs work

Needs work based on #20.

LewisNyman’s picture

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

Status: Needs work » Needs review
FileSize
13.81 KB
12.67 KB
979 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

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

komalk’s picture

samiullah’s picture

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

Version: 9.3.x-dev » 8.0.x-dev
Assigned: Dragan Eror » 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.