CODEWITHSUNDEEP
css
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Styling issue on displaying a box outside the container

I'm trying to workout a solution for a problem, that i couldn't solve by my self. Please take a look and tell me what went wrong in this code

.bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: #eee;
}

.bar .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #4ece99;
  border-radius: 16px;
  transition: width 1s ease-out;
  display: flex;
  overflow: hidden;
  font-size: .75rem;
}

.bar .progress span {
  position: absolute;
  top: -12px;
  left: 100%;
  margin-left: -28px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  min-width: 28px;
  line-height: 22px;
  padding: 0;
  border: 2px solid #345;
  border-radius: 8px;
  background: #fff;
}



.bar2 {
  position: relative;
  width: 100%;
  height: 4px;
  background: #eee;
}

.bar2 .progress {
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #4ece99;
  border-radius: 16px;
  transition: width 1s ease-out;
  display: flex;
  overflow: hidden;
  font-size: .75rem;
}

.bar2 .progress span {
  position: absolute;
  top: -12px;
  left: 100%;
  margin-left: -28px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  min-width: 28px;
  line-height: 22px;
  padding: 0;
  border: 2px solid #345;
  border-radius: 8px;
  background: #fff;
}
Current: 
<div class="bar">
  <div class="progress" style="width: 50%">
    <span>50</span>
  </div>
</div>
Expected
<div class="bar2">
  <div class="progress" style="width: 50%">
    <span>50</span>
  </div>
</div>

If you run the code snippet, you can see two progress bar, In the first progress bar, the number inside the box should be visible as shown in the second progress bar but at that exact position. Any suggestions would be helpful. Thanks

Upvotes: 0

Views: 41

Answers (2)

Rohan Nagmoti
Rohan Nagmoti

Reputation: 31

The code below will give your expected results. You had set the positon of bar1 span to absolute , which was centering it. Thank you.

.bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: #eee;
}

.bar .progress {
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #4ece99;
  border-radius: 16px;
  transition: width 1s ease-out;


  font-size: .75rem;
}

.bar .progress span {
  position: relative;
  top: -12px;
  left: 100%;
  margin-left: -28px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  min-width: 28px;
  line-height: 22px;
  padding: 5px;
  padding-left: 9px;
  padding-right: 9px;
  border: 2px solid #345;
  border-radius: 8px;
  background: #fff;
}



.bar2 {
  position: relative;
  width: 100%;
  height: 4px;
  background: #eee;
}

.bar2 .progress {
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #4ece99;
  border-radius: 16px;
  transition: width 1s ease-out;
  display: flex;
  overflow: hidden;
  font-size: .75rem;
}

.bar2 .progress span {
  position: absolute;
  top: -12px;
  left: 100%;
  margin-left: -28px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  min-width: 28px;
  line-height: 22px;
  padding: 0;
  border: 2px solid #345;
  border-radius: 8px;
  background: #fff;
}
Current: 
<div class="bar">
  <div class="progress" style="width: 50%">
    <span>50</span>
  </div>
</div>
Expected
<div class="bar2">
  <div class="progress" style="width: 50%">
    <span>50</span>
  </div>
</div>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7056

  1. position:relative to .bar .progress {...}.
  2. position:absolute and right:0; to span(.first) this will move to the last based on the position on parent i.e. bar.

fiddle to play around.

.bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: #eee;
}

.bar .progress {
  position: relative;
  width: 70%;
  /* change this make sure it works */
  top: 0;
  left: 0;
  height: 100%;
  background: #4ece99;
  border-radius: 16px;
  transition: width 1s ease-out;
  font-size: .75rem;
}

.first {
  position: absolute;
  right: 0;
  top: -12px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  min-width: 28px;
  line-height: 22px;
  border: 2px solid #345;
  border-radius: 8px;
  background: #fff;
}

.bar2 {
  position: relative;
  width: 100%;
  height: 4px;
  background: #eee;
}

.bar2 .progress {
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #4ece99;
  border-radius: 16px;
  transition: width 1s ease-out;
  display: flex;
  overflow: hidden;
  font-size: .75rem;
}

.bar2 .progress span {
  position: absolute;
  top: -12px;
  left: 100%;
  margin-left: -58px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  min-width: 28px;
  line-height: 22px;
  padding: 0;
  border: 2px solid #345;
  border-radius: 8px;
  background: #fff;
}
Current:
<div class="bar">
  <div class="progress">
    <span class="first">50</span>
  </div>
</div>

Expected
<div class="bar2">
  <div class="progress" style="width: 50%;">
    <span>50</span>
  </div>
</div>

Upvotes: 1

Related Questions