Telerik Forums
Kendo UI for Angular Forum
2 answers
173 views

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';
}


Zornitsa
Telerik team
 answered on 21 Oct 2024
1 answer
84 views

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

Yanmario
Telerik team
 answered on 19 Jul 2024
1 answer
59 views

I tried setting the min property to rem, but it didn't work. Then I read that I can use minPixel property to specify a pixel value in Angular 11+, but that doesn't work either.

The min property of the kendo-splitter-pane element works correctly for me only with %, but I need rem or px. 

Please provide information about the actual behavior and how you can get the desired result.

Zornitsa
Telerik team
 answered on 27 May 2024
1 answer
122 views
Hello guys!
I'm trying to preserve the last width value in the splitter panel's resizer, but the sizeChange event is hitting my endpoint too many times because it's trying to store each of the values ​​that are between the start position and the end position. How can I avoid this? is there a way to get the last value registered in the sizeChange event?
Yanmario
Telerik team
 answered on 14 Mar 2022
1 answer
153 views

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

Dimiter Madjarov
Telerik team
 answered on 03 Feb 2021
1 answer
117 views

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

Thanks

Petar
Telerik team
 answered on 04 May 2020
1 answer
197 views

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.

Svet
Telerik team
 answered on 01 May 2020
2 answers
176 views
I have a kendo-grid inside one pane of an adjustable kendo-splitter.  When I open the grid's column menu, the "handles" that you click on to adjust the size of the panes appear above the column menu.  A screen shot is attached - you can see the black vertical lines on either side of the word "Visible".  

What's the Kendo way of solving this problem?  Override the z-index of the column menu or the pane handles?  Something else?  
Ed
Top achievements
Rank 1
 answered on 07 Aug 2019
2 answers
584 views

 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

Chris
Top achievements
Rank 2
 answered on 17 Apr 2019
1 answer
311 views

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:

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

 

Help would be greatly appreciated.

Daniel
Telerik team
 answered on 26 Feb 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?