Change styling of kendo split button

[Jyothi]

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

[Preslava]

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

[Jyothi]

changing the style in the global scss worked.