Question 262781 in CSS Question posted in
Some basic documentation can be found here.

CSS progress bar width set by inline style, not being applied

My CSS progress bar renders everything except the inline style is not applied so the size of the progress contents does not dynamically change as expected. The value of {{ field_ct_rack_left_pdu__value }} is pushed from a Drupal View.

Here is the HTML:

<div class="iab-progress-bar" data-label="{{ field_ct_rack_left_pdu__value }}%" style="width:{{ field_ct_rack_left_pdu__value }}%"</div>

Here is the CSS:

.iab-progress-bar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 3em;
  background-color: #111;
  border-radius:1em;
  color: white;
  margin-bottom:10px;
  }

.iab-progress-bar::before {
  content: attr(data-label);
  display: flex;
  align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;  
  /*width:3%;*/
  min-width: 2rem;
  max-width: calc(100% - 1em);
  background-color: #fc7703;
  border-radius: 1em;
  padding: 1em;
 }

Rendered progress bar

When I use the width: attribute in the .iab-progress-bar::before selector the bar expands as expected.

The data-label attribute contains the correct value.

I have tried playing around with the data-label attribute in the width: selector but of course I have not been successful.

Thanks for your time and thoughts.

Tags:

2

Answers


  1. 0

    Try like this

    Html :

    <div class= "iab-progress-bar">
<div class="iab-progress-bar_Fill" data-label="20%" style="width:20%" 
</div></div>

    Css:

    .iab-progress-bar {
 position: relative;
 box-sizing: border-box;
 width: 100%;
 height: 3em;
 background-color: #111;
 border-radius:1em;
 color: white;
 margin-bottom:10px;
 }

.iab-progress-bar_Fill{
content: attr(data-label);
display: flex;
align-items: center;
position: absolute;
left: .5em;
top: .5em;
bottom: .5em;  
min-width: 2rem;
max-width: calc(100% - 1em);
background-color: #fc7703;
border-radius: 1em;
padding: 1em;
}

    Now it works dynamically while changing the value

    Login or Signup to reply.
  2. 0

    You have to change width of .iab-progress-bar::before{ }

    You can animate this using animation (@keyframes) ,
    or rewrite html, css and use javascript – see example: w3schools

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search