Is there a way to ensure that the number value on the progress bar remains centered and at the top position

I am currently working on a project that involves progress bars showing real-time values. However, I am facing an issue where the number value is not staying centered within the bar and instead getting pushed ahead of the blue fill, disappearing when it reaches the right side.

Here is a snippet of the code for reference:

<td class="gridTableCell">
    <div style='position: relative' class='progress progress-info'>
        <div class='bar' id='signalRdepthRangePercentage-#:ViewUnitContract.ConveyanceId #' style='width: #: DepthRangePercentage#%'>
        </div>
        <span class='gridSpan' id='signalRdepth-#:ViewUnitContract.ConveyanceId #'>#: ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth#</span>
        <span class='hidden' id='signalRMaxDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MaxDepthRange#</span>
        <span class='hidden' id='signalRMinDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MinDepthRange#</span>
    </div>
</td>

Additionally, here is the CSS code for 'gridSpan':

.gridSpan {
    position: absolute;
    top: 0px;
    z-index: 2;
    text-align: center;
    color: #676767;
    width: 100%
}

The task is to ensure that the number value stays center-aligned within the progress bar without being pushed in front of the blue filler with excessive margins. Any insights or suggestions on how this can be achieved would be greatly appreciated.

csstwitter-bootstrap

Answer №1

Here is an example of how to achieve the desired effect:

See the code in action on FIDDLE

The main container should have text-align:center

The gridSpan element should use display:inline-block instead of being absolutely positioned

The element inside (showing blue % progress) should be absolutely positioned to prevent being affected by the text-align:center.

HTML Markup:

<div class="outer">
    <span class="inner"></span>
    <span class="gridSpan">9048.343</span>
</div>

CSS Styling

.outer
{
    width: 70%;
    margin:20px;
    height: 30px;
    border: 1px solid gray;
    overflow: hidden;
    border-radius: 15px;
    position:relative;
    text-align: center;
}
.inner
{
    background: aqua;
    display:inline-block;
    position:absolute;
    left:0;
    width: 20%;
    height: 30px;
}
.gridSpan {
     display:inline-block;
     margin-top: 5px;
     color: #676767;
     position: relative;
     z-index:2;
}

Alternatively, you can specify the width of the value and apply these properties display:block;left:0;right:0 along with margin:0 auto to your class:

.gridSpan {
 display:block;
 position: absolute;
 margin: 0 auto;
 top: 0px;
 left:0;
 right:0;
 z-index: 2;
 color: #676767;
 width: x px; /*(width of value)*/
}

Answer №2

After some research, I was able to solve the issue thanks to this helpful fiddle: http://jsbin.com/apufux/2/edit (Surprised I hadn't come across this post before!?)

I realized that I had overlooked certain style overrides for the .bar and .progress elements:

   .progress {
        position: relative;
    }

    .bar {
        z-index: 1;
        position: absolute;
    }

    .progress span {
        position: absolute;
        top: 0px;
        z-index: 2;
        text-align: center;
        color: #676767;
        width: 100%
    }

I appreciate your help in trying to resolve the issue! :)

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

Maximizing image size with dynamic height and automatic width using the NextJS Image Component

I am trying to set my images to have a fixed pixel height and automatic width using object-fit: contain. How can I achieve this with the NextJS Image Component without using layout="fill" so that the intrinsic width of the image (width: auto) is ...

cssimagenext.js

Aligning elements next to each other in html / css without using any top margins

How can I arrange four blocks of text side-by-side, center them over a background image, and ensure they respond well on different screen sizes without using tables? I typically use tables for this layout, but I've heard that CSS/HTML5 can achieve th ...

csshtml

HTML - Retain placeholder text while user inputs

My input is structured like this: <input value="My text" placeholder="Placeholder"> Typing in the input causes the placeholder text to disappear, which is expected. However, I am looking to keep the placeholder text visible as a background behind ...

javascripthtmlcss

Utilizing Bootstrap4 to achieve optimal layout of form components

In my current project, I am developing a form using Bootstrap4 with specific design requirements. Despite researching extensively on Bootstrap4 documentation and implementing various strategies like using tags, I have not achieved the desired outcome. Be ...

htmlcssformsbootstrap-4

Looking to boost the height of ngSelect options?

Need help with adjusting the dropdown height for the ng-select form image. Currently, it is only displaying 5 items and I would like it to show 8-10 items. Below is the code I am using: <form [formGroup]="addReportForm" class="form-hori ...

cssangulardrop-down-menudropdown

What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

$(document).ready(function(){ $("#items").children().click(function(){ $(this).toggleClass('clicked'); }); }); .clicked { background-color:red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s ...

javascriptjqueryhtmlcss

I'm attempting to switch between different "screens" by utilizing divs with CSS and JavaScript, using the display property to toggle between none and block. Everything seems to be functioning smoothly except for the

I thought I grasped the concept of this because all my toggles are working fine, except for the last one. The frustrating part is that it's written in the same manner as the others before it. The problematic button is identified by id="startYearOne". ...

javascripthtmlcssdisplayhoisting

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

Apply a class to every group of x elements

In order to style the products displayed on a product list page, I have an unknown amount of divs, with each row containing 4 divs for individual products. My goal is to apply a specific CSS class to the first div in each row, then another class to the sec ...

css

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

javascriptcssreactjsimagebackground

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

jQuery "ooze navigation" - precise pixel rounding

After successfully programming my jQuery slime menu, I am facing a minor issue. Although the menu works beautifully, I have noticed that when I move the arrow and the ending circle of the slime separately, they do not always connect accurately if the curso ...

javascriptjquerycsstransformrounding

Store the arrays in a JSON file before utilizing Array.push() to append data into it

I'm currently developing a calendar software and I want to store events in a JSON file. My strategy involves nesting arrays within arrays in the JSON format, allowing for easy iteration and loading during program initialization. My main question is: ...

javascripthtmlcssarraysjson

Text buttons on the menu are running into each other when displayed on an Android device

After recently completing a redesign of my website, hetoft.com, I am proud to say that I crafted the design and code entirely by hand, with only Dreamweaver as a helpful tool. This was my first experience creating a website with a CSS-based layout, and des ...

androidhtmlcssscalingoverlap

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

There are 12 image icons displayed in a row within div elements using display: inline-block. However, when the browser window is resized, I would like the icons to be arranged on two or more rows so that each row contains an equal number of icons. ...

jquerycssresponsive-design

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Why does the DropDownList consistently remove the initial value?

I am currently in the process of developing a recipe website focused on meals. I have created an admin panel where I can manage the meals added to the site. One issue I am facing is with deleting a meal that was previously added. The menu displays the numb ...

c#htmlcssasp.net

Split Screen Text Comparisons

For some reason, I am finding it challenging to display two paragraphs side by side without disrupting the overall layout. If you would like a visual explanation of the issue, please check out this video: Video If you're interested in reviewing the c ...

javascripthtmlcss

Various CSS regulations for various languages/modes in CodeMirror

Can CodeMirror highlight different languages separately in multi-mode? .cm-s-default .cm-string-html {color: blue;} .cm-s-default .cm-string {color: #170;} Usually, CodeMirror applies the same class names for strings, comments, and other objects in all l ...

javascriptcsscodemirror

Ways to format a C# string outcome showcased in HTML (ASP.NET)

I'm facing an issue with formatting the output (string) retrieved from a C# database connected to ASP.NET. I want to style the row["Grens"] differently from row["Sanctie"], for instance. The result is displayed in a basic div: <div id="resultaat" ...

c#htmlcssasp.net