CODEWITHSUNDEEP
htmlcss
Pygirl
Pygirl

Reputation: 13339

Make divs on the top of the other div

My goal is to display info on those chart div like this:

enter image description here

I was able to show it on div but the thing is those were not responsive in nature. So I have started from scratch and writing the code again to solve that issue.

So in my new code, When I uncomment those divs under class kpi-box:

This is what I get: enter image description here

My graph gets shifted to right side.

This is what it should look like:

enter image description here

Code snippet:

  <div class="container">
    <div class="chart-holder">
      <div id="kpi-confirmed" class="kpi-box">
              <div class="label">Death</div> //<----------------- from here
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>        
      </div>
      <div id="test2" class="kpi-box">
<!--               <div class="label">Death</div>
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>  -->
              <!-- <br>        -->
      </div>

Code and demo:

Line no. 1-124:

https://blockbuilder.org/ninjakx/7ff7bc1ea3e100d9a8d92aa6bcec3fb6

I know I need to use position absolute and position relative but I ain't able to do it. Can someone help me in this?

Upvotes: 1

Views: 85

Answers (3)

Akanimoh Samuel Obot
Akanimoh Samuel Obot

Reputation: 120

Gotten from your code in

https://blockbuilder.org/ninjakx/7ff7bc1ea3e100d9a8d92aa6bcec3fb6

     flex:20px 1 1 1;
     display:flex;
     flex-direction:row;
     min-height:0;
     position: absolute;
     flex-wrap:nowrap;}```

Edit depending on the size it will give the charts when displayed ``flex:30px 1 1 1;``

Upvotes: 1

vishnu sandhireddy
vishnu sandhireddy

Reputation: 1176

As the height of the child css selector is limiting the height of the box you are not able to adjust the all contents to the box. Remove the height for the child class or reduce the height of the svg. 

.child {
  flex: 1 10 20%;
  /* explanation below */
  margin-left: 1%;
  margin-right: 1%;
  /*height: 12.5vw;*/
  background-color: blue;
}

Upvotes: 2

Richa
Richa

Reputation: 4270

First wrap all your extra information in a <div> then make it absolute.

<div style="position: absolute;top: 10px;left: 10px;">
      <div class="value">123</div>
      <div class="diff">12345</div>
      <div class="description"></div>
      <div class="label">Death</div>
    </div>

Upvotes: 1

Related Questions