2

How do I align text to the right on a

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

because both

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

and

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

dont work. Please could someone help?

mast3rd3mon
  • 8,229
  • 2
  • 22
  • 46

2 Answers2

11

This one should be work

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

you can use this one also for specific one

[headerStyle]="{'text-align': 'right'}"
[style]="{'text-align': 'right'}"
Chanaka Amarasinghe
  • 3,489
  • 11
  • 26
  • 38
2

You can easily do it with a template:

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

See this plunkr

knikolov
  • 1,650
  • 1
  • 12
  • 18
  • 1
    It doesn't work. It removes my formatting then just displays it on the left – mast3rd3mon Jan 20 '17 at 10:48
  • did you see the plunkr? – knikolov Jan 20 '17 at 11:22
  • yes, i can get that to work but when i copy the code and change it accordingly, it doesnt work – mast3rd3mon Jan 20 '17 at 11:33
  • make sure that you are copying the styles as well. Also you can inspect the element and see if the right-align class is there. – knikolov Jan 20 '17 at 16:28
  • It has the class and style sheet it needs. I checked the element and it applies the right align but doesn't right align the text. I just applied another style, color: aquamarine;, and that works fine – mast3rd3mon Jan 23 '17 at 09:05
  • span is inline element in it does not take all the available space in the cell. Use block element or set span from inline to block `{{dataItem.ProductName}}` – Luka Jun 05 '18 at 08:05