Formatierung von vertikalen Text in divs

Question

Ich versuche, Spalte Header-Text vertikal zu rendern, so dass die Spalten schmal sind. Ich kann nicht scheinen, den Text zu drehen und innerhalb des div zu bleiben.

Ich habe eine schnelle jsfiddle gemacht.

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

Mein "pre-Problem" ist, dass meine Demo nicht richtig macht. Es wiederholt die Daten dreimal, d. H. Drei 17s, drei 18 und drei 19s. Ich weiß nicht warum.

(Die Barebones Angular Geige ich begann nicht div ng-app = „myApp“ so musste ich es hinzufügen enthielt oder die Winkel nie angewendet wird. Ich dachte, vielleicht, dass etwas mit ihm zu tun hatte, aber das Entfernen dieses Div bricht die App.)

Sobald ich das beheben, mein echtes Problem ist, dass ich nicht den Text zu verhalten bekommen kann. Es sollte innerhalb der 100px großen, 20px schmalen Boxen liegen, die bündig aneinander liegen sollten, so dass die Spalten nur 20px oder so breit sind. Sie rendern 100px breit.

<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; 
} 

Ich habe versucht, ein div innerhalb eines div zu verschachteln und die Drehung auf äußere oder innere divs anzuwenden. Ich habe auch versucht, die Breite auf 100px und die Höhe auf 20px in der Hoffnung, dass es die Dimensionierung vor die Rotation anwendet, aber bisher hat keine Kombination funktioniert.

Answer 1

Versuchen Sie, den Text in ein internes div einzufügen und transforming- und margin-Eigenschaften auf diese anstatt auf die gesamte Breite und Rotation eines einzelnen div anzuwenden.

Verwenden Sie den folgenden 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> 

und die 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; 
} 

Dies sollte Ihnen die Ergebnisse, Ihre für hoffentlich suchen.

Wenn dies hilft, markieren Sie bitte die Antwort und stimmen Sie ab. Danke

Answer 2

Für das angular ng-repeat Problem müssen Sie sicherstellen, dass Ihre Ladungstyp "Kein Umbruch im Körper" für Ihr JavaScript ist, auch Sie Angular zweimal geladen, so dass ich die zweite Ladung entfernt.

Und für die Rotation sollten Sie den Container nicht drehen, sondern einen inneren Container erstellen und darauf drehen.

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


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

.cell { 
    transform: rotate(-90deg); 
    margin-left: -30px; 
    margin-top: 30px; 
    width: 100px; 
} 

Hier ist die korrigierte Geige: https://jsfiddle.net/w674sLbL/10/

Hoffnung, das hilft.