Splitter 100%height

[Chris]

 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

[Svet]

Hi Chris,

Thank you for the demonstrated example.

In general, when we set the width and/or height of any HTML element to be a percentage value, we also need to set the height of all of its parents to be some percentage value or set a fixed width and/or height to one of the parent elements of the designated element. Check the following updated example:
https://stackblitz.com/edit/angular-w2vayk?file=src%2Fapp%2Fapp.component.ts

styles.css:

/* Add application styles & imports to this file! */

html, body, my-app {
 width: 100%;
 height: 100%;
}

The same approach would be valid for the Splitter component.

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Chris]

Thank you Svetlin for your help. This is what I was looking for.