выравнивание текста по столбцу кендо-сетки в angular2

Как выровнять текст по правому краю на

<kendo-grid-column> </kendo-grid-column>

потому что оба

<kendo-grid-column field="margin" title="Margin" style="text-align: right;"> </kendo-grid-column>

а также

<kendo-grid-column field="margin" title="Margin" text-align="right"> </kendo-grid-column>

не работай. Пожалуйста, может кто-нибудь помочь?


kendo-ui-angular2 kendo-ui-grid
person mast3rd3mon    schedule 19.01.2017    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Этот должен работать

.k-header .k-link{
   text-align: right;
}

вы можете использовать это также для конкретного

[headerStyle]="{'text-align': 'right'}"
[style]="{'text-align': 'right'}"
person Chanaka Amarasinghe    schedule 10.10.2018

arrow_upward
1
arrow_downward

Вы можете легко сделать это с помощью шаблона:

 <template kendoGridCellTemplate let-dataItem>
   <span class="right-align">{{dataItem.ProductName}}</span>
 </template>

См. этот plunkr

person knikolov    schedule 19.01.2017
comment
Это не работает. Он удаляет мое форматирование, а затем просто отображает его слева - person mast3rd3mon; 20.01.2017
comment
ты планкр видел? - person knikolov; 20.01.2017
comment
да, я могу заставить это работать, но когда я копирую код и изменяю его соответствующим образом, он не работает - person mast3rd3mon; 20.01.2017
comment
убедитесь, что вы копируете и стили. Также вы можете проверить элемент и посмотреть, есть ли класс выравнивания по правому краю. - person knikolov; 20.01.2017
comment
У него есть класс и таблица стилей, в которых он нуждается. Я проверил элемент, и он применяет выравнивание по правому краю, но не выравнивает текст по правому краю. Я только что применил другой стиль, цвет: аквамарин, и он отлично работает. - person mast3rd3mon; 23.01.2017
comment
span является строчным элементом, он не занимает все доступное пространство в ячейке. Используйте блочный элемент или установите диапазон от встроенного до блочного <span style="text-align: right; display: block">{{dataItem.ProductName}}</span> - person Luka; 05.06.2018