CODEWITHSUNDEEP
htmltypescriptclasssass
krishna
krishna

Reputation: 121

SCSS background-color not showing up (angular2+ typescript)

I have an HTML with nested divs. My child div is not displaying background-color: #00000

I have tried overflow: hidden and important, didnt work

HTML

<div class="container">
  <div class="progress">
    <div class="progress-track"></div>
    <div id="Created" class="progress-step">
      Created
    </div>
    <div id="Approved" class="progress-step">
      Approved
    </div>
    </div>
  </div>

SCSS

.container {
  border: double;
  margin-left: 50%;
}

.progress {
  position: relative;
  display: flex;
}

.progress .progress-track {
  position: absolute;
  background-color: #a82222;
  height: 22px;
  z-index: -1;
  overflow: hidden;
}

this class does not work --> .progress .progress-track {}

enter image description here

Upvotes: 0

Views: 71

Answers (1)

Barzev
Barzev

Reputation: 402

Not sure what you're trying to achieve, but your class selector is working. If you want it to show the #a8222 background colour, you have to give it some width, or add some text. See the code example below:

.progress .progress-track {
  width: 100px;
  /* position: absolute; */
  background-color: #a82222;
  /* height: 22px;
  z-index: -1; */
  /* overflow: hidden; */
}

Check out the JsFiddle example below:

https://jsfiddle.net/97g3o81s/11/

Upvotes: 1

Related Questions