Adjusting the width of the progress bar without affecting the position of the elements within

Looking for ideas on how to adjust the display width of a progress bar without affecting the elements inside it.

Here's what I'm aiming for:

https://i.sstatic.net/1clkF.png

Currently, the code for a player entry is as follows:

<div class="row playerInfo">
  <div class="row healthProgress progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" style="width: 100%; height: 25px;">
    <img id="primaryWeapon" class="col-4 pull-left no-padding img-responsive" src="/images/weapons/weapon_ak47.png" height="25px" />
    <p class="playerName col-6 text-right no-padding">Matias49</p>
    <p class="playerHealth col-1>100</p>
  </div>
</div>

I think rather than using the bootstrap progress-bar class, I should utilize an empty div and manipulate the width and background-color underneath the player details. However, I'm unsure how to implement this in CSS. Alternatively, is there a way to achieve this with the bootstrap progress-bar class?

Note: I realize I probably should have enclosed the progress-bar div within a progress container.

htmlcssbootstrap-4

Answer №1

Big thanks to @Pablo Darde for the input, but I actually found a solution by nesting one div inside another just like I had originally considered.

So here's how my final code turned out:

<div class="row playerDetails">
    <div class="row healthBar progress-bar role="progressbar" aria-valuenow="100" aria-valuemin="0" style="width: 100%; height: 25px></div>
    <div class="row firstRow style="position: absolute;">
        <img id="mainWeapon" class="col-4 pull-left no-padding img-responsive" src="/images/weapons/weapon_m4a1.png" height="25px" />
        <p class="playerAlias col-6 text-right no-padding">Zack33</p>
        <p class="playerHP col-1>100</p>
    </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

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

JSON accessed through the file:// protocol

When opening my web app, the browser displays a .html file with the address bar showing the protocol file://. However, I need to open a .json file in the script and load it into a variable. I have attempted using $.ajax request with data type jsonp, as we ...

javascriptjqueryhtmljsonajax

Completed Animation with Callback in AngularJS CSS

Currently working with AngularJS and hoping to receive a notification upon completion of an animation. I am aware that this can be achieved with javascript animations such as myApp.animation(...), but I'm intrigued if there is an alternative method wi ...

javascriptcssangularjsanimation

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

Currently, I am working on a contact form that includes checkboxes for users to select multiple options, with the requirement of selecting at least one box. My challenge lies in figuring out how to pass all the selected checkboxes' data to an API usin ...

htmlarraysangulartypescriptforms

Choose the specific Element by its dynamicID in JQuery

Just starting out with Jquery and I have a specific task in mind. In my HTML page, I have elements with IDs generated by concatenating a string variable. My goal is to use JQuery to select the element with this dynamically generated ID. See below for more ...

javascriptjqueryhtml

When the source is added with jQuery, the IMG element displays at 0x0 pixels

My latest project involved creating a custom modal popup named #light1. In my JavaScript code, I capture the source from the image the user clicks on and insert it into the img tag with the id of addable. Using jQuery: var images=$('#raam img') ...

jqueryhtmlimage

Exploring the mechanics of aligning a div using Bootstrap 4

I recently found a code snippet that beautifully centers a login box, which I implemented. However, I realized that I actually wanted the login box to be positioned 25% from the left instead of 50%. The interesting part is, the code doesn't follow the ...

cssbootstrap-4

What is the CSS technique for concealing the content of an ordered list item while retaining the marker?

In our order process, we utilize an ordered list to display the steps in sequence: <ol> <li>Products</li> <li class="active">Customer</li> <li>Payment</li> </ol> On desktop view, it appears a ...

htmlcss

The setTimeout function executes immediately without any delay

In my code, an html button triggers a jQuery function (let's call it funcOne) which then calls another function (funcTwo) recursively to modify CSS in the DOM. The funcTwo function involves setTimeout() calls to create a blinking effect by delaying th ...

javascriptjquerycssrecursionsettimeout

Passing a PHP array to a JavaScript function using a button click event in an HTML form

It seems there was some confusion in my approach. I'm working with a datatable that has an edit button at the end. Clicking on this button opens a modal, and I want to pass the data from the table to the modal. While I can send it as a single variabl ...

javascriptphphtmlarraysbootstrap-modal

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss

When using the POST method to modify data via an HTML form, the previous values may be

I am currently developing a CRUD system and focusing on the Update functionality. My task involves updating existing user data with new information submitted through an HTML form. At this stage, I am working on retrieving the POST values from the HTML for ...

phphtmlsqlmysqli

Advancing with Bootstrap 4: Progress Bar Evolution

It appears that Bootstrap 4 has introduced a new method for updating the progress of your progress bar. Aim: Dynamically update the progress bar percentage upon click <div class="progress"> <div id='progressBar' class="progress-bar" r ...

jquerycsstwitter-bootstrapbootstrap-4progress-bar

The slider feature is malfunctioning on Internet Explorer version 8

Hello everyone, I am facing an issue with my website located at: http://210.48.94.218/~printabl/ When viewed in IE 8, the slider is not functioning properly (it is showing collapsed between the menu and product images section) The theme used for my site ...

jquerycsswordpressinternet-explorerinternet-explorer-8

Animating skill bars as you scroll down the page

How can I achieve a skill bar animation on a specific section of the page scroll? I have attempted to create a sliding skill bar animation, but it is not producing the desired effect. It currently starts animating at the beginning of the page, but I want i ...

jqueryhtmlcss

Utilize JQuery to create expand and collapse functionality for a div

Trying to decipher the intricacies of this JQuery code has been quite the challenge for me. I would normally opt for a different approach, but it seems I must adhere to this particular method. My main issue lies in getting the functionality right - when cl ...

jqueryhtmlcssasp.net-mvcsass

Is there a method to maintain highlighted text on a webpage even after a user has selected it and clicked elsewhere on the page?

Consider this scenario: a user uses their mouse to select the first line of a paragraph, and then later goes on to select another line lower down on the page. How can we ensure that both the previously selected text and the new selection remain highlighted ...

javascripthtmlcsstextselection

What are the pros and cons of embedding background image data into CSS as Base64?

While examining the source code of a greasemonkey userscript, I came across some interesting CSS: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsK ...

cssbase64background-imagedata-uri

Page design ruined as a result of oversized fonts in IE9 for <h2> elements

Everything looks great on various browsers, except for the notorious IE9. We've implemented a block-style layout with a width of 660px, centered on the page. Despite setting the h2 width to 660px to match the layout, IE9 displays the font size much ...

htmlcssinternet-explorer-9

Using Single Quotes as Parameters in JavaScript

I'm currently facing an issue with a function that is designed to populate a field in the parent window when clicked. Specifically, it is meant to fill in a text field with a name. The challenge I am encountering arises when the field contains a sing ...

javascriptasp.nethtmlsyntaxparameters