This is a migrated thread and some comments may be shown as answers.

Change styling of kendo split button

2 Answers 26 Views
SplitButton
This is a migrated thread and some comments may be shown as answers.
Jyothi
Top achievements
Rank 1
Veteran
Jyothi asked on 29 Jan 2021, 07:44 PM

Hi,

Is there any way to change the look and feel of the keldo-split-button? I have looked at the documentation and I do not see any examples on how to go about it.

The default look of the kendo split button it to have rectangular edges. I would like it to be wounded with a space between the button and arrow.

Regards,

Jyothi

2 Answers, 1 is accepted

Sort by
0
Preslava
Telerik team
answered on 01 Feb 2021, 08:10 AM

Hi Jyothi,

One way to apply custom styling to the buttons inside the SplitButton is to change the default encapsulation mode to ViewEncapsulation.None like this:

 

encapsulation: ViewEncapsulation.None

 

I have prepared an example, where the required styles are applied:

https://stackblitz.com/edit/angular-1jhuzl-kpa37w?file=app/app.component.ts

If changing the encapsulation mode to "None" is not desired, the styles could be set globally like this:

https://stackblitz.com/edit/angular-vfufgj-oshwpf?file=index.html 

I hope this helps. Let me know should there be further questions.

Regards,
Preslava
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jyothi
Top achievements
Rank 1
Veteran
answered on 03 Feb 2021, 02:02 PM
changing the style in the global scss worked.
Tags
SplitButton
Asked by
Jyothi
Top achievements
Rank 1
Veteran
Answers by
Preslava
Telerik team
Jyothi
Top achievements
Rank 1
Veteran
Share this question
or