formatting vertical text in divs

Question

I'm trying to render column header text vertically, so the columns are narrow. I cannot seem to get the text to rotate and stay within the div.

I've made a quick jsfiddle.

https://jsfiddle.net/DaveC426914/w674sLbL/9/

My "pre-problem" is that my demo is not rendering correctly. It's repeating the data three times i.e. three 17s, three 18 and three 19s. I don't know why.

(The barebones Angular fiddle I started from did not contain a div ng-app="myApp" so I had to add it or the angular is never applied. I thought maybe that had something to do with it, but remving this div breaks the app.)

Once I fix that, my real problem is that I can't get the text to behave. It should fall within the 100px tall, 20px narrow boxes that should be flush against each other, so that he columns are only 20px or so wide. They are rendering 100px wide.

<div class="table-header-cell" ng-repeat="item in headerDates">
  {{item.date}}
</div>

.table-header-cell {
    display: inline-block;
    border: 1px solid grey;
    margin: 1px 1px 5px;
    height: 30px;
    transform: rotate(-90deg);
      transform-origin: left bottom; 
    width: 100px;
}

I've tried variants of nesting a div within a div, and applying the rotation to outer or inner divs. I've also tried setting width to 100px and height to 20px in the hopes that it applies the dimensioning before the rotation, but so far no combination has worked.

Answer 1

Try wrapping the text in an internal div and apply transforming and margin properties to that instead of all width and rotation on a single div.

Use the following html:

<div ng-app="myApp">
 <div ng-controller="MyCtrl">
  <div class="table-header-cell" ng-repeat="item in headerDates">
   <div class="innertext">
     {{item.date}}
   </div>
  </div>
 </div>
</div>

and the css:

.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}

.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}

This should give you the results your looking for hopefully.

If this helps please mark the answer and vote it. Thanks