Troubleshooting Problem with Text Labels on Bootstrap Progress Bars

I am attempting to utilize a Bootstrap progress bar to display text on it. The progress bar itself functions properly, but the text is not centered in the entire progress bar; rather, it is centered within the gray area. As the progress bar fills up, the text shifts to the right. How can I ensure that the text remains centered? This is how I am currently implementing it:

        <div class="progress" style="height: 30px">
          <div
            id="theprogressbar"
            class="progress-bar progress-bar-striped bg-success"
            role="progressbar"
            style="width: 0%; transition: none"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <div id="theprogressbartext" class="d-flex justify-content-center align-items-center h-100 w-100">0/0</div>
        </div>

When updating the text, I follow this approach:

function setProgressBar(percent, text) {
  $("#theprogressbar").attr("style", "width:" + percent + "%");
  $("#theprogressbar").attr("aria-valuenow", percent);
  $("#theprogressbartext").html(text);
}

Could someone point out what I might be doing incorrectly in this setup? I am using Bootstrap from the CDN: 

https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d21">[email protected]</a>/dist/js/bootstrap.bundle.min.js

javascripttwitter-bootstrapbootstrap-5

Answer №1

For those intrigued by the illusion:

        <div class="loading-bar position-relative" style="height: 40px">
          <div
            id="theprogressbar"
            class="progress-bar progress-bar-striped bg-primary"
            role="progressbar"
            style="width: 0%; transition: none"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <div
            id="theprogressbartext"
            class="d-flex justify-content-center align-items-center position-absolute h-100 w-100"
          >
            0/0
          </div>
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can getters in vuex be utilized uniquely?

After dedicating two weeks to studying Vuex, I find myself pondering the true significance and purpose of getters in the framework. I ran the following code snippet and everything seems to be functioning properly. this.$store.getters["app/url"] ...

javascriptvue.jsvuex

Searching the JSON file by its value using Waterline

I am struggling with locating model instances based on the nested address attribute in one of my models. attributes: { address: { type: 'json' } } I have attempted various queries to find model instances located in the same city: Model ...

javascriptjsonsails.jswaterline

Dropdown selection values were not set appropriately

I've been encountering an issue with setting the selected value in a drop-down list using the code below. The values are being split from a comma-separated string, but it's not functioning as intended. When I use string='text1,text2,text3,t ...

javascriptjquery

Javascript downloadable content available for download

<div class="center"data-role="content" id="content" > <a href="#flappy" data-transition="slide" >Avoid Becoming a Terrorist</a> </div> <div id="flappy" > <center> <div id="page"> ...

javascript

The select2 ajax functionality encountered an error: Uncaught TypeError - Unable to access the 'context' property as it is undefined

Trying to make an AJAX request using the Select2 jQuery plugin. The query appears to be functioning properly, but the problem arises when ".context===undefined" is called on the "data" object: Uncaught TypeError: Cannot read property 'context' o ...

javascriptjqueryajaxjquery-select2

Using Gmail with Nodemailer is throwing an error: "Cannot add property 'mailer' on a string with value 'SMTP'."

I am facing an issue with sending data from a form to my Gmail account. Whenever I click the submit button, I encounter the same error message repeatedly. Despite researching various problems related to nodemailer, none of them match the specific problem t ...

javascriptnode.jspropertiesnodemailer

Does element.click() in Protractor's Webdriver method return a promise, or is there a way for it to handle errors?

Is the element(by.css()).click() method returning a promise, or is there a way to catch and assert against any errors that may occur? In my scenario, I have a component that is not clickable, and I want to handle the error when this happens. I also want t ...

javascriptseleniumelementpromiseprotractor

Resizing columns in HTML table remains effective even after the page is refreshed

I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...

javascriptjqueryhtml

Error: Unforeseen token encountered while attempting to import React in Javascript

Upon executing the command 'npm run start', I encountered this error: import React from 'react'; ^^^^^ SyntaxError: Unexpected identifier at Module._compile (internal/modules/cjs/loader.js:721:23) at Object.Module._exten ...

javascriptnode.jsreactjsnpmjsx

Using Chrome.downloads.download within a Chrome application

My app is running into an issue where Chrome is giving me the error message that chrome.downloads is undefined. In my attempt to download an image, here is a simple example provided... Here is the manifest: { "manifest_version": 2, "name": "Download ...

javascriptgoogle-chromegoogle-chrome-app

Populate a pair of div elements using just one AJAX request

Currently, I am attempting to use the load() function to ajaxly load two separate divs, #follow-x and #follow-y, by clicking a button. The approach I have taken is as follows within the success function of my code snippet. However, this method does not see ...

javascriptjqueryajaxdjango

Refreshed page causing hide/show div to reset

Hello there, I'm currently working on a web application and I need to implement some JavaScript code. The application consists of three sections, each with its own title and button. When the button is clicked, a hidden div tag is displayed. Clicking t ...

javascripthtmlshow-hide

Exploring ways to extract key:value pairs from an encoded URL form using POST in express/node.js

I have a web form with 4 input fields. The form is set up as follows: <form action="/" method="post" onsubmit="alert('data submittet')"> It should default to x-www-form-urlencoded. The form functions correctly and I am able to submit my d ...

javascriptnode.jsexpresspostbody-parser

Is there a way to achieve a similar outcome on my site?

Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. https://i.sstatic.net/Ly0gP.png https://i.sstatic.net/oDe1i.png This is the specific effect that caught my attention. Can anyone provide me with insight on how to impl ...

javascriptphpjqueryhtmlcss

Utilizing mutation observers for monitoring dynamic changes in fetch request outcomes

I'm currently developing a specialized interface that showcases the cumulative ticket count (an integer representing the total) sourced from a 3rd party API. My goal is to trigger a notification whenever this count increases. I've come across inf ...

javascriptvue.jsmutation-observers

generating a dynamic tree structure with JSON by leveraging a database

It was brought to my attention that I am facing a unique challenge: I am trying to generate a JSON tree using Java/JavaScript with data sourced from a MySQL Database. I have not been able to locate the appropriate documentation for this task Any assistan ...

javascriptjavajsondynamic

VueJS Vuetify automatically centers default content

Vue cli version @ 5.0.6 | Vuetify version: [email protected] I have been utilizing Vue.js and Vuetify for some time now, and I can't shake the feeling that not all Vue.js/Vuetify components default to centered alignment. I recently initialized a ...

javascriptvue.jsvuetify.js

Having trouble with installing NPM and ng commands, neither of them is working. I may have to uninstall everything and begin from scratch

Learning Angular and how to use the terminal is all new to me. I recently installed NPM and attempted to use ng serve, but encountered a series of issues. At this point, I am considering completely uninstalling everything so I can start fresh. I've d ...

javascriptnode.jsnpmterminalnvm

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript

I need help with displaying the content of a div with the id "hello" in maindiv when clicking on the href "Click Here", but it's not working as expected. Here is the code I have: $(document).ready(function() { var newhtml = '<a href="#he ...

javascriptjqueryhtml

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

csssassbootstrap-5color-scheme