Compact angular grids

[Neil]

I'm trying to create more condensed grids in Kendo UI for Angular.

I've added a style to reduce the font size which works

k-grid {font-size:10px;}

However try and change the default padding from  padding: 8px 12px; to nothing it seems to have no effect.

k-grid td {padding:0px;}

I've taken the demo grid from the Kendo Angular site and just added these styles to https://plnkr.co/edit/WByOCE8JzmJkNq4wROIw?p=preview

Any ideas on how to compact the grid to fit more data in?

[Dimiter Topalov]

Hello Neil,

To set the same rule for multiple selectors, you will need to list the selectors, separated by commas, and then provide the rule. Furthermore, a dot (".") was missing in front of the k-grid class in the second selector. To overwrite CSS of inner components you will also need to use any of the special "deep" combinators, or set the ViewEncapsulation to "None", e.g.:

styles: [`
      >>> .k-grid, >>> .k-grid .k-button {font-size:10px;}
      >>> .k-grid td, >>> .k-grid th {padding:0;}
    `],

https://plnkr.co/edit/Lpx7MCuzZACfx5WxgAXK?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Neil]

Thanks. That works great :-)