Kendo MVC Spreadsheet - Поворот текста ячейки на 90 ° - PullRequest
Новая
       25

Kendo MVC Spreadsheet - Поворот текста ячейки на 90 °

1 голос
/ 08 марта 2019

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

Я использую Telerik MVC framework, и в настоящее время моя задача - построить Spreadsheet, который будет выглядеть так же, как данный шаблон.Однако в шаблоне есть ячейки в заголовке, повернутые на 90 ° (или 270, если хотите) (из-за их огромного количества).Кажется, Telerik не реализовал функциональность, чтобы повернуть его, настроив какое-то свойство или вызвав подготовленную функцию (по крайней мере, я не нашел пути), и поэтому я пытаюсь сделать это с помощью css.

Я могу повернуть его по общему синтаксису (тестирование в Chrome - на данный момент достаточно одной строки) 

transform: rotate(270deg);

И теперь я столкнулся с проблемой.Повернутый текст выходит из ячейки (поэтому часть текста не видна), и я не могу найти способ его перемещения.В качестве обходного пути я могу установить вертикальное выравнивание по центру, но я бы хотел, чтобы текст был выровнен по левому краю (слева после поворота, поэтому до нижней части ячейки).Так как div с текстом расположен относительно друг от друга, я попытался поиграть со значениями top , но это не совсем то, что я хочу.

Есть ли у вас какие-либо идеи, как держать его вращаемым и располагать слева (снизу)?

Вот пример додзё: - ячейка A1 расположена по центру, а B1 - слева / снизу с текстом вне ячейки.

Пример DOJO

1 Ответ

1 голос
/ 08 марта 2019

Я предлагаю использовать свойство css текстового ориентирования и режим письма.Обратитесь к этой ссылке .

. Также использование свойства фона ячейки будет применять цвет для всей ячейки, а не только для текста. 

<style>
  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-bottom {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}

  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-center {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}
  </style>
    <div id="spreadsheet"></div>
    <script type="text/javascript" charset="utf-8">
        $("#spreadsheet").kendoSpreadsheet();
        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
        var sheet = spreadsheet.activeSheet();
        sheet.rowHeight(0, 75);
        sheet.range("A1")
             .value("Lorem ipsum")
             .verticalAlign("center")
             .background("rgb(167,214,255)");
        sheet.range("B1")
             .value("Dolet semper")
             .verticalAlign("bottom")
             .background("yellow");;
    </script>
...