I have tried to change the background color for a kendo-splitter-pane. However even if I add a style tag to it, it does not seem to apply to its inner elements.

What is then the appropriate way to customize the color for a kendo-splitter-pane?

1 Answers

Shai On Best Solutions

You need to apply the background-color on the kendo-splitter-pane element, like this:

    selector: 'my-app',
    template: `
        <kendo-splitter style="height: 200px;">
            <kendo-splitter-pane class="pane1">
                <h3>Left pane</h3>

                <h3>Center pane</h3>

            <kendo-splitter-pane [resizable]="false">
                <h3>Right pane</h3>
    styles: [ `
        h3 {
            font-size: 1.2em;
            padding: 10px;

        .pane1 {
            background-color: red;
    ` ]
class AppComponent {}