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.
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:
The most important being the last
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%'
}
]
});
<
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
>
<
div
class
=
"k-pane k-scrollable"
role
=
"group"
style
=
"position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;"
>7</
div
>