grid styles

Thread ID:	Created:	Updated:	Platform:	Replies:
150181	Dec 24,2019 09:03 AM UTC	Dec 24,2019 10:56 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Grid

serdar çelebi

Asked On December 24, 2019 09:03 AM UTC

Hi Team,

I want to use small font size and decrase padding of grids toolbar and grids filter bar but i couldnt. I reduced height but not like i wanted. also how can i do grids headerText bold.

Thanks in advance

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On December 24, 2019 10:56 AM UTC

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.

Link: https://stackblitz.com/edit/angular-ddyr4u?file=app.component.css

Refer the help documentation.

Link: https://ej2.syncfusion.com/angular/documentation/grid/how-to/grid-styling/

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowheight

Regards,

Thavasianand S.

Reply | Reply with quote

CONTACT US

grid styles

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US