Блог

Я пытаюсь отобразить текст заголовка столбца вертикально, поэтому столбцы получаются узкими. Кажется, я не могу заставить текст поворачиваться и оставаться в пределах div.

Я сделал быстрый jsfiddle.

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

Моя «предварительная проблема» заключается в том, что моя демонстрация отображается некорректно. Данные повторяются три раза, то есть три 17-секундных, три 18-секундных и три 19-секундных. Я не знаю почему.

(Скрипта barebones Angular, с которой я начал, не содержала div ng-app =»MyApp», поэтому мне пришлось добавить ее, иначе angular никогда не будет применен. Я подумал, может быть, это как-то связано с этим, но удаление этого div нарушает работу приложения.)

Как только я это исправлю, моя настоящая проблема в том, что я не могу заставить текст вести себя должным образом. Он должен располагаться в пределах полей высотой 100 пикселей и шириной 20 пикселей, которые должны располагаться вплотную друг к другу, так, чтобы ширина столбцов составляла всего 20 пикселей или около того. Они отображают ширину 100 пикселей.

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

Я пробовал варианты вложения div в div и применения поворота к внешним или внутренним разделам. Я также попытался установить ширину в 100 пикселей и высоту в 20 пикселей в надежде, что это применит изменение размеров перед поворотом, но пока ни одна комбинация не сработала.

Попробуйте поместить текст во внутренний div и применить к нему свойства преобразования и поля вместо всей ширины и поворота в одном div.

Используйте следующий 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>
  

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

Надеюсь, это должно дать вам результаты, которые вы ищете.

Если это поможет, пожалуйста, отметьте ответ и проголосуйте за него. Спасибо

Для проблемы с angular ng-repeat вам нужно убедиться, что ваш тип загрузки «Без переноса в тело» для вашего JavaScript, также вы загружали Angular дважды, поэтому я удалил вторую загрузку.

И для поворота вы должны не поворачивать контейнер, а создать внутренний контейнер и вращать его.

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

Вот исправленная скрипка: https://jsfiddle.net/w674sLbL/10 /

Надеюсь, это поможет.