Splitter and percentages totaling more than 100%

[Ryan]

I have the need for a 7 column splitter where only 4 columns are visible at any point. I have set the overflow to hidden on the parent container and will control horizontal scrolling programatically as needed.

Is this a bug or is this an unsupported use-case? It appears that everything is calculated properly except for the width. I'm going to try fixing it after creation as well as after the resize event fires. Your help would be appreciated.

$('#target').kendoSplitter({
    orientation: 'horizontal',
    panes: [
        { collapsible: false, resizable: false, size: '25%' },
        { collapsible: false, resizable: false, size: '25%' },
        { collapsible: false, resizable: false, size: '25%' },
        { collapsible: false, resizable: false, size: '25%' },
        { collapsible: false, resizable: false, size: '25%' },
        { collapsible: false, resizable: false, size: '25%' },
        { collapsible: false, resizable: false, size: '25%' }
    ]
});

The 7th column gets rendered with a width of 0. This is probably a bug where the splitter doesn't expect for the columns to be greater than 100%. Here's what gets rendered:

<div id="target" class="k-widget k-splitter" data-role="splitter">
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 0px;">1</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 300px;"></div>
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 307px;">2</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 607px;"></div>
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 614px;">3</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 914px;"></div>
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 921px;">4</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1221px;"></div>
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1228px;">5</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1528px;"></div>
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1535px;">6</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1835px;"></div>
    <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>
</div>

The most important being the last

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>

[Dimo]

Hello Ryan,

Indeed, the described configuration is invalid and not supported. You can consider using a wider Splitter placed in a scrollable container.

Regards,
Dimo
the Telerik team