I have an horizontal splitter in my web page (a collapsible menu and the main content). The main content is separate by a vertical splitter (a fixed size pane with 30 pixels and another one taking the space left). The fixed vertical pane contain a few elements with a display:inline-block, making them all on one line.
When the collapsible menu is open there isnt enought space for all elements on the same line so it takes two, however the panes have a fixed size and don't resize properly to 60px. I can't manually resize it in my vertical splitter's resize event because it'll cause recursivity and I can't do it in my horizontal splitter's one because the problem is there on other events too (ex. : browser resize)
How can I resize dynamically a pane based on it's content?
When the collapsible menu is open there isnt enought space for all elements on the same line so it takes two, however the panes have a fixed size and don't resize properly to 60px. I can't manually resize it in my vertical splitter's resize event because it'll cause recursivity and I can't do it in my horizontal splitter's one because the problem is there on other events too (ex. : browser resize)
How can I resize dynamically a pane based on it's content?
1 Answer, 1 is accepted
0
Hello Stéphane,
The Splitter's layout is adjusted "from the outside to the inside". In other words, the pane dimensions depend only on the Splitter size and the pane configuration, and not on the content.
Resizing a pane after initialization is possible if you modify the internal Splitter configuration options. This involves using private APIs and is practically a hack.
The "true" options forces layout adjustment even if the Splitter's outer dimensions have not changed.
Regards,
Dimo
Telerik
The Splitter's layout is adjusted "from the outside to the inside". In other words, the pane dimensions depend only on the Splitter size and the pane configuration, and not on the content.
Resizing a pane after initialization is possible if you modify the internal Splitter configuration options. This involves using private APIs and is practically a hack.
// get Splitter objectvar splitter = $("#splitter").data("kendoSplitter");// modify the size of the first panesplitter.options.panes[0].size = "150px";// force layout readjustmentsplitter.resize(true);The "true" options forces layout adjustment even if the Splitter's outer dimensions have not changed.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!