Resizing a pane depending on its content

2 posts, 0 answers
  1. Stéphane
    Stéphane avatar
    7 posts
    Member since:
    Sep 2011

    Posted 10 Dec 2013 Link to this post

    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?
  2. Dimo
    Dimo avatar
    8322 posts

    Posted 12 Dec 2013 Link to this post

    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

    The "true" options forces layout adjustment even if the Splitter's outer dimensions have not changed.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top