CODEWITHSUNDEEP
htmlcsscss-positionvertical-text
Chiwda
Chiwda

Reputation: 1364

Having trouble with Vertical Alignment of Text and Rotated Text

I am trying to create a simple Bar Chart, but having huge problems with the CSS. And yes, I have banged my head against D3 for a while but gave up and decided to create my own. Here is my code:

Note that it is extracted from a larger page where this is contained within a single div but I have put it into a separate page for SO.

#B2Card {
  height: 340px;
  padding: 0;
  padding-bottom: 5px;
}

#B2CardLeft {
  position: absolute;
  height: inherit;
  float: left;
  width: 10%;
  text-align: right;
}

#B2CardRight {
  float: right;
  width: 90%;
  height: inherit;
}

#BarChart {
  float: left;
  height: 75%;
  width: 100%;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  text-align: left;
}

#BarChartXAxis {
  float: left;
  height: 25%;
  width: 100%;
  background-color: #0FC;
}

.verticaltext {
  position: absolute;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  bottom: -85%;
  color: #fff;
}
<div id="B2Card">
  <div id="B2CardLeft">
    <p class="YAxis">60</p>
    <p class="YAxis">50</p>
    <p class="YAxis">40</p>
    <p class="YAxis">30</p>
    <p class="YAxis">20</p>
    <p class="YAxis">10</p>
  </div>
  <div id="B2CardRight">
    <div id="BarChart"></div>
    <div id="BarChartXAxis">
      <p class="verticaltext" style="left:32%;">2017-10-10</p>
      <p class="verticaltext" style="left:33%;">2017-10-11</p>
      <p class="verticaltext" style="left:34%;">2017-10-12</p>
      <p class="verticaltext" style="left:35%;">2017-10-13</p>
      <p class="verticaltext" style="left:36%;">2017-10-14</p>
    </div>
  </div>
</div>

My first and most important problem is that I cannot get the rotated text (class="verticaltext") in the X-Axis to be reliably positioned in the lower div (#BarChartXAxis). I have tried all kinds of values for left/right/bottom etc. but the text goes all over the place. I finally got it to work using the above code, but as soon as I changed the size of the browser window it gets all munged again. Note that the dates are generated on the fly so there could be as few as 7 dates and as many as 90. Hence I need to be able to adjust it dynamically.

My second problem is minor - I cannot get the Y-Axis text to sit at the bottom of the Div that it is in (#B2CardLeft).

For both the above, I am willing to use jQuery if that makes it reliable. TIA!

Upvotes: 0

Views: 72

Answers (1)

tarun joshi
tarun joshi

Reputation: 107

To solve your first problem:

#B2Card {
  height: 340px;
  padding: 0;
  padding-bottom: 5px;
}

#B2CardLeft {
  height: inherit;
  float: left;
  width: 10%;
  text-align: right;
}

#B2CardRight {
  float: right;
  width: 90%;
  height: inherit;
  position: relative;
}

#BarChart {
  float: left;
  height: 75%;
  width: 100%;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  text-align: left;
}

#BarChartXAxis {
  float: left;
  height: 25%;
  width: 100%;
  background-color: #0FC;
}

.verticaltext {
  position: absolute;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  bottom: 15px;
  color: #fff;
}
<div id="B2Card">
  <div id="B2CardLeft">
    <p class="YAxis">60</p>
    <p class="YAxis">50</p>
    <p class="YAxis">40</p>
    <p class="YAxis">30</p>
    <p class="YAxis">20</p>
    <p class="YAxis">10</p>
  </div>
  <div id="B2CardRight">
    <div id="BarChart"></div>
    <div id="BarChartXAxis">
      <p class="verticaltext">2017-10-10</p>
      <p class="verticaltext" style="left:4%">2017-10-11</p>
      <p class="verticaltext" style="left:8%">2017-10-12</p>
      <p class="verticaltext" style="left:12%">2017-10-13</p>
      <p class="verticaltext" style="left:16%">2017-10-14</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions