Progress bar text not showing correctly

[jsbroks]

Describe the bug

Progressbar text is not going to a new line. This screenshot is from the docs.

Steps to reproduce the bug

1. Create a progress bar with multiple lines of text

Expected behavior

All text should be visible

Versions

Libraries:

• BootstrapVue: 2.15.0

Environment:

• Device: Desktop
• OS: Ubuntu 20.04
• Browser: Chrome

[Hiws]

This looks to be an issue with a change made in bootstrap v4.5.0 that added line-height: 0 to the progress class.

To fix it you can add the following CSS, to get it back to pre 4.5.0 styling.

.progress {
  line-height: initial;
}

[Hiws]

PR that introduced the change: twbs/bootstrap#29413

So if IE11 support is something your app needs, you might want to check what the workaround above does, to make sure it doesn't cause any issues.

[jsbroks]

Thanks! How would I remove the line break in the first place?

[Hiws]

Thanks! How would I remove the line break in the first place?

You want it to say "Progress: 50/100" on one line instead of two?

If that's the case, just wrap the content in a single div.

<b-progress-bar :value="value">
  <div>
    Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong>
  </div>
</b-progress-bar>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!