Splitter within Tab not sizing properly.

8 posts, 1 answers
  1. Mark
    Mark avatar
    7 posts
    Member since:
    Dec 2011

    Posted 03 Jan 2012 Link to this post


    I'm trying to use the Splitter in a div contained within a TabStrip.

    I'm guessing it's because the div is not visible at the point when I call

    $('#x-splitter ').kendoSplitter();

    but when the splitter is eventually displayed (i.e. when the tab is selected) the first pane is 0-width. As soon as the window is resized it jumps to the correct size.

    Is there any way I can tell the splitter to refresh when it's first displayed?

    Any help much appreciated!

  2. Answer
    Alex Gyoshev
    Alex Gyoshev avatar
    2498 posts

    Posted 05 Jan 2012 Link to this post

    Hello Mark,

    You need to trigger a resize of the splitter once its container is being resized (or, in this case, shown):

        animation: false,
        select: function(e) {
            setTimeout(function() {
                $(e.contentElement).find(".k-splitter").each(function() {


    The following jsFiddle demonstrates the approach.

    All the best,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Mark
    Mark avatar
    7 posts
    Member since:
    Dec 2011

    Posted 05 Jan 2012 Link to this post

    Works perfectly, thank you!
  4. Gary
    Gary avatar
    14 posts
    Member since:
    Jan 2012

    Posted 16 Apr 2012 Link to this post

    Are we going to need to have workarounds like this in the future or is Kendo going to be changed to handle these sorts of things going forward? Needless to say (but I'll say it anyway), it's a waste of developer effort to need to discover this post to make things work as expected.
  5. Michel
    Michel avatar
    4 posts
    Member since:
    Jul 2012

    Posted 29 Aug 2012 Link to this post

    The provided solution works fine only if the tab's animation property is set to false. But in my case I want to have the animation enabled. Is there any workaround for this issue?
  6. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 08 Jan 2013 Link to this post

    Thanks...I found this solution in this post necessary to implement the Splitter
  7. Arabinda
    Arabinda avatar
    1 posts
    Member since:
    Mar 2013

    Posted 26 Apr 2013 Link to this post

    I have load view in edit mode within a tab and tab strip within a window. But controller method does not call the controller second time when I edit another record.

    function ShowEdit(e) {
            var dialog = $("#clientEditWindow");
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            clientId = dataItem.id;
                title: "Edit Client",

                actions: ["Refresh", "Minimize", "Maximize", "Close"],
                visible: false,
                open: onOpen,
                refresh: function () { this.center(); }
        function onOpen(e) {
           // e.preventDefault();
                animation: {
                    open: {
                        effects: "fadeIn"
                contentLoad: onContentLoad,
                contentUrls: ['@Url.Action(MVC.Client.EditClient(0))'.replace('/0', '/' + clientId), '@Url.Action(MVC.ClientLocation.ClientLocationList())']

    EditClient() does not call second time. Any help?
  8. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 14 Feb 2014 in reply to Michel Link to this post

    I realize this thread is old, but thought I would still post the answer to Michel's question in case someone else runs across this. If your tabs use the animation, you have to wait for the animation to finish before executing the resize code so you use setTimeout for that.
    Something like this:
    activate: function () {
      setTimeout(function () {
         //resize code goes here
      }, 120);
    Of course the length of time you need in the setTimeout depends on your animation length. In my case the animation duration is 100, so I used 120 for duration.

    Hope this helps anyone else trying to get resizing to work in complex scenarios; in my case it's a grid to size from within a splitter within a tab within a splitter... ;) It can work it just takes determination! lol
Back to Top