CODEWITHSUNDEEP
htmlcssbackground-color
Vahn Toan
Vahn Toan

Reputation: 103

Div background color not updating

I have the folowing structure:

.wrapper{
        position: relative;
        margin: 20px;
    }
    #bottomBar{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
        z-index: -40;
    }
    #percentageText{
        position: absolute;
        z-index: 9;
        margin-top: 37px;
        left: 20px;
        background-color: red;
    }
<div class="wrapper">
<div class="ldBar"
  data-type="fill"
  style="margin: 0 auto;"
  id="bottomBar"
  data-fill-dir="ltr"
  data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
  data-fill-background="rgba(0, 0, 0, 0.0)"
  data-fill="red"></div>
      <div id="percentageText"></div>
</div>

the text in percentage text is controlled by a JS script that works. I want to change the background of the div where the text is However background-color does nothing whatsoever to the div of the text.

What am i doing wrong?

Upvotes: 1

Views: 1296

Answers (3)

Tom
Tom

Reputation: 1

Looks like there is a bug in HTML classes. Try the same thing using an ID instead of a class. I had the same problem. Classes did not work. An ID did. If this is indeed a bug in HTML (JS, CSS), it needs to be fixed urgently.

Upvotes: 0

Yasaman.Mansouri
Yasaman.Mansouri

Reputation: 560

set height and width for your div and test it again!you can use below css.

.wrapper{
        position: relative;
        margin: 20px;
    }
    #bottomBar{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
        z-index: -40;
    }
    #percentageText{
        position: absolute;
        z-index: 9;
        margin-top: 37px;
        left: 20px;
        background-color: red;
        height:100px;
        width:100%;
    }
<div class="wrapper">
<div class="ldBar"
  data-type="fill"
  style="margin: 0 auto;"
  id="bottomBar"
  data-fill-dir="ltr"
  data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
  data-fill-background="rgba(0, 0, 0, 0.0)"
  data-fill="red"></div>
      <div id="percentageText"></div>
</div>

Upvotes: 1

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

You are changing the background color of the div #percentageText.

Your color red is not showing because the div is empty. Try adding some text inside #percentageText, or increase the width of the element, and your color will become visible.

Upvotes: 1

Related Questions