Hi Serdar,
Greetings from Syncfusion support.
Query: I want to use small font size and decrease padding of grids toolbar and grids filter bar but I couldn’t. I reduced height but not like I wanted. also how can I do grids headerText bold.
We can achieve your requirement by using the below CSS style. We can set row height for Grid content using the rowHeight property of Grid.
|
[app.component.html]
<ejs-grid [dataSource]='data' height='350' [allowFiltering]='true' [rowHeight]=25 [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
. . . .
</e-columns>
</ejs-grid>
-----------------------------------------------------------------------------------------
[app.component.css]
<style>
//Set font size for Grid content
.e-grid .e-rowcell {
font-size: 10px;
}
// Set font size and bold for headertext in Grid
.e-grid .e-headercelldiv {
font-size: 13px;
font-weight: bold;
}
//Setting padding for Grid toolbar
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
padding: 0 0.5px;
}
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
padding: 0.5px;
}
//Setting padding for Grid filterbar
.e-grid .e-filterbarcell, .e-grid .e-filterbarcelldisabled {
padding: 0 5px;
}
</style>
|
We have prepared a simple sample in the following link.
Refer the help documentation.
Regards,
Thavasianand S.
