Splitter with vertical orientation, pane does not have explicit height

[zrsio4]

I'm submitting a...

• Bug report

Current behavior

The contents of a pane in a vertically aligned splitter cannot take up 100% of the space because the splitter pane itself does not have an explicit size.

Expected behavior

Said splitter pane has explicit size so the contents can use height:100%

Minimal reproduction of the problem with instructions

https://plnkr.co/edit/LVrKRsT0XVd8mXNZaR5O

What is the motivation or use case for changing the behavior?

I use vertical splitters in many places.

Environment

Browser:

• Chrome (desktop) version 63.0.3239.132

System:

• TypeScript version: 2.5.3
• Node version: 6.10.3
• NPM version: 3.10.10
• Platform: Windows

Workaround (requires manual change detection, especially with ChangeDetectionStrategy.OnPush): https://plnkr.co/edit/dsJ0JlqePeIjXIX3zRzb

[gyoshev]

In order to use the height property, you can add the style .k-pane { height: 100%; } to all panes. This way, using height: 100%; on pane contents will properly function, without the need for calculations in JS. See the updated plunker.

While this is a styling issue that can be resolved in many ways (flexbox and positioning, to name others), using height is very handy. We'll consider adding this rule to the component styles. I'll report back in this issue once we do.

[gyoshev]

The style for this has been added in @progress/[email protected], so there is no need for the workaround anymore. Here is the updated plunker.