0

I have a jsfiddle ready https://jsfiddle.net/1g8bc9ho/5/

I am trying to make a graph area. There is a title, plot, yaxis and xaxis area setup using css grid.

enter image description here

I rotate the yaxis label, but the text is wrapping itself. I want the yAxis label to expand to the maximum height of the plot area (which is variable depending on the plot!) Hopefully it can stay centered both vertically and horizontally, with the text expanding the entire row height.

//css
.PlotArea {
  background: yellow;
  display: grid;
  grid-template-columns: 1fr 9fr;
  grid-template-rows: 1fr;
}

.yAxis {
  background: dodgerblue;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  transform-origin: 50% 50%;
  transform: rotate(270deg);
}

.title {
  background: pink;
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.plot {
  background: orange;
  grid-column: 2;
  grid-row: 2;
}

.xAxis {
    background: aqua;
    grid-column: 2;
    grid-row: 3;
    text-align: center;
 }


/// html
<div class="PlotArea">
    <div class="yAxis">
        yAxis LAbel to Position
    </div>
    <div class="plot">
    <ul>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    </ul>
    </div>
    <div class="title">title</div>
    <div class="xAxis">xAxis</div>
</div>

How can I get the yaxis label to fill the plot height? ...while keeping the first column fraction width the same? (Some methods I've tried change the width of the fraction and I don't understand why)

NicoWheat
  • 1,260
  • 15
  • 20
  • 1
    Is this : https://jsfiddle.net/376ztcwb/ what you try to do ? (if not ff but for all : https://jsfiddle.net/376ztcwb/1/ ) or https://jsfiddle.net/376ztcwb/3/ or https://jsfiddle.net/376ztcwb/4/ – G-Cyrillus Mar 02 '20 at 21:07
  • 1
    Don't rotate it, use writing-mode. https://stackoverflow.com/questions/4264527/vertical-text-direction – Paulie_D Mar 02 '20 at 23:11
  • I've never seen writing-mode before - and it's exactly what I need. – NicoWheat Mar 03 '20 at 16:39

0 Answers0