Telerik Forums / KendoReact
This is a migrated thread and some comments may be shown as answers.

How to decrease size of checkbox size being used inside the grid.

2 Answers 1412 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mukesh
Top achievements
Rank 1
Mukesh asked on 06 Aug 2019, 09:32 AM

Hi,

I am using checkbox for selection inside the grid but the size of the checkbox coming by default is too big. Is there any way to customize the size of the check box inside the grid.

 

Regards,

Mukesh

2 Answers, 1 is accepted

Sort by
0
Mukesh
Top achievements
Rank 1
answered on 07 Aug 2019, 07:19 AM
Can you please provide the solution for this?
0
Stefan
Telerik team
answered on 07 Aug 2019, 10:03 AM
Hello, Mukesh,

This can be achieved with CSS by modifying the following rules. Please have in mind that the specific value will depend on the theme as each of the themes have different values:

.k-checkbox-label::before, .k-radio-label::before {
    width: 12px;
    height: 12px;
}
.k-checkbox-label::after {
    width: 12px;
    height: 12px;
}
 
.k-checkbox-label::after {
    font-size: 8.666667px;
    text-indent: 1.666667px;
}

This is an example with the Material theme:

https://stackblitz.com/edit/react-jmr57s?file=index.html

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Mukesh
Top achievements
Rank 1
Answers by
Mukesh
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or