Kendo Splitter not working well with angular on collapsing dynamic panels

Question

I'm using kendo-ui with angular for four horizontal panels.

when the last panel is toggled it opens and after resizing it if I close it by toggle, the space previously occupied by the last panel stays unoccupied by the adjacent panel

Upon closing the last panel, I want the adjacent panel to take up it's space

kendo version v17.2.0

Here's the stackblitz of the repo

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

steps to reproduce:

1. Click on Toogle 4th Panel button. This opens 4th panel on the right side.
2. Resize the last panel by using cursor.
3. Click on Toggle 4th panel, You observe the space previously occupied by 4th panel is empty.

Expectation: Upon toggling 4th panel the space previously occupied by 4th panel should now be occupied by 3rd panel.

Thanks in advance

Answer 1

The reason why the 3rd panel does not go back to fill the remaining space after resizing other panels is that the kendo splitter is managing the new user-determined widths using flex-basis: ##px and setting flex-grow: 0;. This means that the panels are forced to use these set pixel widths and won't stretch to fill the parent.

A CSS solution is to find the last panel (<kendo-splitter-pane>) which is not hidden (i.e. has the .hidden class) and then force it to fill the remaining space using flex-grow: 1

kendo-splitter-pane:nth-last-child(1 of kendo-splitter-pane:not(.hidden)) {
    flex-grow: 1 !important;
}

Or an Angular solution is to apply this styling conditionally when the 4th panel is hidden

<kendo-splitter-pane [style.flexGrow]="!panelLayout.resultData ? 1 : null">
  ...
</kendo-splitter-pane>

See this stackblitz: https://stackblitz.com/edit/angular-m7fxze-z52qsndf?file=src%2Findex.html,src%2Fapp%2Fapp.component.ts