Splitter and percentages totaling more than 100%

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    60 posts
    Member since:
    Mar 2012

    Posted 07 May 2013 Link to this post

    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>
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 07 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top