Style progress bar

@VladimirAus: thanks for your work on Bootstrap5 and continuous progress. But please do not set issue status to RTBC if noone else than you has reviewed the changes or if you just had committed the change. RTBC is for successful review by users and BEFORE committing. It indicates for others that there is a working patch in the issue not committed yet. If you think the quick fixes you add by yourself are OK then just post the issue, the patch, and commit and close as fixed.

This isn't enough since a javascript progress bar doesn't use this template. It is created via a Drupal.theme.progressBar() theme function. I'm not using radix and am struggling with the same issue.

I am having what I suspect may be the same problem. My progress bars are not rendering correctly. Everything renders at full width so the progress indicator appears to be full etc.

I see VladimirAus commited some code in #2. Does that code fix the problem, and if so, is it scheduled to be included in the next update?

Thanks for your time and thoughts.

@GuyManDude these changes are already included in the current release.
I would also like to clarify, where is used your progress bar?

Also, I would like to know @VladimirAus, where the new changes should be made, in the current issue branch or 3.0.x-dev? Because I would like to solve this issue.

I am using it in a Views Block.

@GuyManDude
If you will provide screenshots. it will be easy to understand the issue. Also if you will write development steps then it will help to replicate easily.

Hi Ravi. Thanks for your help. I have attached some screenshots. The orange colored bars you see on the rendered block are the progress bars.

Here is the Views field rewrite code to make it easy to copy and paste.

<div class="progress"><strong>Left PDU: </strong>
  <div class="progress-bar iab-warning" role="progressbar" style="width: {{ field_ct_rack_left_pdu }}%" aria-valuenow="{{ field_ct_rack_left_pdu }}" aria-valuemin="0" aria-valuemax="100">{{ field_ct_rack_left_pdu }}</div>
</div>

@GuyManDude
Bootstrap progress bar styles are overwriting in bootstrap5 base theme in "sass/drupal/_progress.scss". You can again overwrite in your custom theme.

Thanks again Ravi. The _progress.css file only contains this css:

.progress {
  display: block;
  height: unset;
  overflow: unset;
  font-size: unset;
  background-color: unset;
}

I tried commenting it out and restarting Apache but it made no difference.

I also tried commenting out the extensive progress section in the /var/www/html/drupal/web/themes/contrib/bootstrap5/css/style.css file and again it made no difference.

At this point I need a little more detailed help please.

@GuyManDude you can use the progress bar template from the Bootstrap 5 theme at templates/misc/progress-bar.html.twig in your view field template. In the attached file, you can see an example of such a display.
And is your question related to this issue? Because from the information you provided, your field should just look like a progress bar, not be one.
Perhaps you should create a separate issue ticket for this?

@Abyss Thank you for correct me.
@GuyManDude if you want apply default style then follow @Abyss suggestions. But if you want apply custom styles as provided screenshots then you should make changes in your custom theme styles.
But according your comment, the changes is not reflecting when making changes so i will suggest that do not make changes direct in _progress.css. Changes should be in _progress.scss file and compile the sass files.

@Abyss. Thanks for your feedback. I use this technique on a D7 site with a Bootstrap 3 theme. I am just trying to recreate something close to it on D9/10.

I have no idea how to use that twig template with my Views block. Can I not simply comment out whatever progress bar oriented css the Bootstrap 5 theme applies and use my own css in my own css file?

Hello @VladimirAus,

I came across this topic while working on an issue involving the _progress.scss file in this theme. It seems that this file is overriding the display property from Bootstrap 5 (BS5).

In the Bootstrap 5 source code, it's indicated that the .progress element should have a display: flex; styling (ref: https://github.com/twbs/bootstrap/blob/main/scss/_progress.scss#L24). However, in the BS5 Drupal theme, this value is set to display: block; (ref: https://git.drupalcode.org/project/bootstrap5/-/blob/3.0.x/scss/drupal/_...).

I'm curious about the reasoning behind this change. In my understanding, it would be beneficial to maintain code that's similar to the original BS5 code to minimize the need for patches and potential compatibility issues.

I'm looking forward to hearing your thoughts on this matter.

Best regards,
Mykola Balabash