In the image below, notice how the text is currently centered in the middle of the progress bars' progress. Is there a way to have this text 'overlap' the progress, stand out, and be centered across the entire width while still showing the progress behind it?
It would look something like this:
You can find the code for creating 4 progress bars here.
I haven't included my own code because I don't have one to recreate what I'm envisioning.
To achieve this effect, you can wrap the title of the progress bar in an additional div element, as demonstrated in the code snippet below:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
padding: 20px 0 0;
}
.progress {
position: relative;
}
.progress-bar-title {
position: absolute;
text-align: center;
line-height: 20px; /* line-height should be equal to bar height */
overflow: hidden;
color: #fff;
right: 0;
left: 0;
top: 0;
}<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
<div class="progress-bar-title">60%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
<div class="progress-bar-title">Custom Progress Bar Title</div>
</div>I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...
Struggling to replicate a design due to issues with the overlay section. I have separate divs for the menu bar, globe, and header text but positioning them as overlays is proving problematic. Attempted to use zIndex without success. https://i.sstatic.net/ ...
On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...
Within my application, the structure is set up as follows: [ ["section title", [{ item }, { item } ... ]], ["section title", [{ item }, { item } ... ]], ... and so forth When displayed in the view, the sections are placed in panels, with their internal ...
Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...
Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...
Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...
I am seeking assistance in using Selenium with Python to target a specific element that seems to be located inside a frame. Specifically, I am attempting to select the element with 'id' = 'kiadvany_cim' within what appears to be a windo ...
I have an input field similar to the one shown below: <input type ="number" id="numberTxt" placeholder="Number Only"/> To ensure that the value entered is a number, I am using the following function with the keypress event: <script> ...
I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...
I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...
Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...
Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...
Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...
Imagine I have a scenario where I receive a result set as shown below: db.transaction( function(transaction) { transaction.executeSql( 'SELECT col1, col2, col3 FROM table;', [],function(transaction, result){ //need to find a ...
I am currently working on my first project using Less and have been following a tutorial closely. However, when I try to compile with lessc, I encounter the following error: ParseError: Unrecognised input. Possibly missing something in C:\Path\t ...
I need help finding a firefox/firebug plugin (or any OFFLINE tool is fine) that can show me the real text/markup ratio. While there are some online options available like and a Firefox plugin at https://addons.mozilla.org/en-US/firefox/addon/150366/ (whi ...
Within the confines of this DIV element... <div name="layer1" style="background-color:lightblue;"> <hr>Site:Downtown DataCenter Device: 2KBS</hr> </div> Hello there, I am utilizing Inline CSS Styling. Is it possible to make the t ...
My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...
While exploring my file system on a jupyter notebook server, I noticed that I can access and modify HTML and text files along with ipynb files. However, I am interested in viewing the files as rendered HTML rather than editable HTML. In simpler terms, is ...