Hi,

I have a kendo-splitter with two horizontal panes with large content. After page loading, when I resize the browser (half the width), the behaviour is as expected: each pane gets its own horizontal scrollbar.
However, if once resized by the splitter bar, the pane width is not longer adjusted after browser resize events. Instead, the page shows a single scrollbar for the whole splitter.

I understood from a similar JQuery thread (https://docs.telerik.com/kendo-ui/knowledge-base/keep-pane-size-in-percentages), that this is expected and that I have to rearrange the pane sizes programatically.

Is there more recent angular sample code for this approach, our could someone kindly layout the most effective way (avoid flickering etc.)?

As an additional question : How do I achieve separate vertical scrollbars for the panes? The pane contents have different size. When changing the height of the browser window, I get one vertical scrollbar for the whole splitter. However I would prefer separate vertical scrollbars for the panes.

My sample component code is placed below, toghether with two screenshots of wanted / unwanted rendering.

Thank you!

import {Component} from '@angular/core';
import {SplitterComponent, SplitterPaneComponent} from '@progress/kendo-angular-layout';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SplitterComponent, SplitterPaneComponent],
  template:
    `
      <div class="container" kendoWindowContainer>
        <main>
          <kendo-splitter style="height: 100%">
            <kendo-splitter-pane [collapsible]="true">
              <div class="pane-content" style="height: 500px">
                <h3>Inner splitter / left pane</h3>
                <p>Resizable and collapsible.</p>
              </div>
            </kendo-splitter-pane>

            <kendo-splitter-pane>
              <div class="pane-content" style="height: 700px">
                <h3>Inner splitter / center pane</h3>
                <p>Resizable only.</p>
              </div>
            </kendo-splitter-pane>

          </kendo-splitter>
        </main>
      </div>
    `,
  styles: `
    .pane-content {
      padding: 0 10px;
      border: black 1px solid;
      width: 600px;
    }

    h3 {
      font-size: 1.2em;
      margin: 10px 0;
      padding: 0;
    }

    p {
      margin: 0;
      padding: 0;
    }
  `
})
export class AppComponent {
  title = 'test-kendo-splitter';
}

Hi

I want to programmatically hide the right panel.
But if you change the panel size, then when hidden, the left panel does not take up free space.

Kendo component

https://www.telerik.com/kendo-angular-ui/components/layout/splitter/

Demo

https://stackblitz.com/edit/angular-m7fxze-rabzpa?file=src%2Fapp%2Fapp.component.ts

When is the splitter pane event 'sizeChange' fired? Before or after rendering the new html content? Same question on 'layoutChange'!

How can I set the initial width of the left pane when showing the Splitter horizontally?

Thanks

I am doing this:

<kendo-splitter orientation="vertical">
  <kendo-splitter-pane> <h3>Top pane</h3> </kendo-splitter-pane>
  <kendo-splitter-pane *ngIf="visible"> <h3>Bottom pane</h3> </kendo-splitter-pane>
</kendo-splitter>

Nothing works. What do I need to install/import/export and what else to make it work? I have spent hours searching for a single page that would explain how to add all kendo to a project.

 using the Splitter for left / right layout and  looking to find a way to make the splitter take up full height and width of the screen.

I have tried style="height: 100%;" on the 

<kendo-splitter orientation="vertical" style="height: 100%;">

but this didnt do anything. If I set the height to a px value it works fine.

Please help - here is a   for an example.

https://stackblitz.com/edit/angular-smpykp?file=src%2Fapp%2Fapp.component.ts

Hi,

I am searching for a way to programmatically toggle splitter pane. I would like to show or hide one of the panes, possibly even hiding the splitter bar.

I have a simple two-pane vertical splitter:

Help would be greatly appreciated.