CODEWITHSUNDEEP
javascripthtmlcss
User7354632781
User7354632781

Reputation: 2274

adding padding messing up the progress bar

I have following css class to add padding: 2px to add those vertical lines in progress bar but its messing up the progress bar as you can see in image. I earlier had margin-left: 2px but then it wont apply the background color white in those small vertical lines.

.ProgressGroup--progress:not(:first-child){
  padding: 2px;
  background-color: white;
}

enter image description here

How can i fix that?

Upvotes: 1

Views: 1572

Answers (2)

LKG
LKG

Reputation: 4192

If you are using divs then you can get it by using following approach, use margin instead of padding to get space each of others.

Below i posted an example, hope it will help you.

.bigbox {
  width: 500px;
  border: 1px solid;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  overflow:hidden;
}

.innerbox {
  flex: 1;
  margin: 0px 2px;
  min-height: 25px;
  background:tomato;
}
.innerbox:nth-child(1) {
  background:black;
}
.innerbox:nth-child(2) {
  background:red;
}
.innerbox:first-child, .innerbox:last-child {
  margin:0;
}
<div class="bigbox">
  <div class="innerbox"></div>
  <div class="innerbox"></div>
  <div class="innerbox"></div>
</div>

Upvotes: 1

Sanjay Rathod
Sanjay Rathod

Reputation: 317

The problem is the padding is added to all the sides, thereby messing the progress bar. The "blue" & "green" sections differ in height compared to the "red" one. Thus, adding the padding only to left and right won't mess the progress bar and also have those vertical lines!

This may help!

.ProgressGroup--progress:not(:first-child){
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: white;
}

Upvotes: 1

Related Questions