9

Problem :

  • To make a vertical line which separates two objects but it won't appear because it doesn't have height although I added height: 100%.
  • Why isn't it filling up the space from the top to the bottom of my div? Is it because .card-body has height: auto?


Tried Cases :

  • I already tried adding width, disabling flex-box but nothing of that worked, but if I add a specific height to my .card-body it works.


Do you know a solution how it could work without adding a specific height?

.card {
  margin-bottom: 30px;
}

.card > .card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card > .card-header.light {
  color: #fff;
}

.card > .card-body {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}

.card > .card-body.server-status {
  display: flex;
  align-items: center;
}

.card > .card-body.server-status > .counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card > .card-body.server-status > .counter > span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}
        <div class="card">
          <div class="card-header light">
            Active Services
          </div>
          <div class="card-body server-status">
            <div class="counter">
              7/9
              <span>
                Servers running
              </span>
            </div>
            <div style="border-left:1px solid #0d2c4a;height:100%;"></div>
            <div class="chart">

            </div>
          </div>
        </div>

1
  • Your code snippets works bad, not understandable
    – Akbar Soft
    Aug 16, 2018 at 12:44

3 Answers 3

18

You need to make it stretch since your flex container is align-items: center

You can remove the height 100%, I added a class to the divider, it comes down to this

.divider {
  align-self: stretch;
}

If you did not have the align center, it would of worked by default because the align items defaults to stretch but since you changed it to center and your divider has no content so the line does not show. Setting the divider itself to stretch again solves the problem and no need for the extra css

.card {
  margin-bottom: 30px;
}

.card>.card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card>.card-header.light {
  color: #fff;
}

.card>.card-body {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}

.card>.card-body.server-status {
  display: flex;
  align-items: center;
}

.card>.card-body.server-status>.counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card>.card-body.server-status>.counter>span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}

.divider {
  align-self: stretch;
}
<div class="card">
  <div class="card-header light">
    Active Services
  </div>
  <div class="card-body server-status">
    <div class="counter">
      7/9
      <span>
         Servers running
      </span>
    </div>
    <div class="divider" style="border-left:1px solid #0d2c4a;"></div>
    <div class="chart"></div>
  </div>
</div>

0
0

Also you can add this css property to your css ...

.counter{
    border-right: 1px solid black;
}
0

Instead of using a <div>, try using an <hr> and rotating it with css. Something along the lines of:

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    transform: rotate(90deg);
} 

See this documentation for help: https://www.w3schools.com/tags/tag_hr.asp

1
  • 2
    I didn't wanted to use <hr> because it stands for horizontal rule, which makes no sense for a vertical line. Aug 18, 2018 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.