This is a migrated thread and some comments may be shown as answers.

Resizing a pane depending on its content

1 Answer 192 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Stéphane
Top achievements
Rank 1
Stéphane asked on 10 Dec 2013, 05:54 PM
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?

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 12 Dec 2013, 12:44 PM
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.


// get Splitter object
var splitter = $("#splitter").data("kendoSplitter");
// modify the size of the first pane
splitter.options.panes[0].size = "150px";
// force layout readjustment
splitter.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!
Tags
Splitter
Asked by
Stéphane
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or