Progress bar not styled correctly

@danharper
It happens if bootstrap js or jquery is not working properly or is missing.
Did you check the browser console?

I'm getting the same issue here

@Anas_maw
I am sure that jQuery file is missing.
Share console error.

jQuery not missing.

@Anas_maw
Can you confirm that a inline style is adding or not on progressbar div as attached screenshot?

Please find attached screeshot

@Anas_maw
According to screenshot → , The styles are not applying.

May i know, Are you compiling sass files?
If yes, then there are some mistakes during creating sub-theme.

May i know how you created sub-theme?

The issue may be due to deprecated "Popper.js" in Drupal 10.

I'm facing the problem on Drupal 9

May i know how you set progress bar during export views data?

I got a similar styling problem.
The initial HTML output is , then the code has been tranformed into .
And here are the styling applied to the class item and to progress bar

@xalix79
What is Drupal version?
and Are you getting any error related to jQuery in console or recent log messages?

I'm still getting this problem in Drupal 10.2.2

Screenshots attached.

Maybe I have missed something in the sub theme? but I haven't really added that much to it.

Are you using https://www.drupal.org/project/views_data_export →

It may be very helpful if somebody write recreating issue steps.

Need "Steps to reproduce".

Hi @ravi-kant

1. Create view that displays a table on a page with on field "Title"
2. Install views data export
3. Add a Data export display
4. Attach the display to the initial page.
5. Set the format setting to csv
6. On the data export display change the Export settings -> method to batch.
7. View the page and then click Download csv

That should reproduce the issue.

Cheers Dan

The issue is generating due to replacing 'progress__bar' container with a bunch of div structure.

I debug by adding below code in bootstrap_barrio/templates/misc/progress-bar.html.twig

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

When i added above code in progress-bar.html.twig then the default bootstrap style is applying.

Hmm, so why is this happening ? Views data export is replacing the div incorrectly?

Yes, so the issue is due to "views data export" module.

I have created a ticket on "Views data export" module so getting suggestions about progress bar template.

https://www.drupal.org/project/views_data_export/issues/3447549 💬 The Bootstrap Progress bar container is replacing so Bootstrap Progress bar styles are breaking. Active

This problem exists for any Batch UI, it's not because of views_data_export. So wherever I start a batch, the progress bar looks unstyled.

I can see one possible problem here:
https://git.drupalcode.org/project/bootstrap_barrio/-/blob/5.x/css/compo...

This CSS file is empty, but the corresponding pcss file is not empty. So maybe the build process was wrong for compiling this file?