title: Kendo UI Splitter resize
body: <p>I have a Tabstrip, where one of the Tabs contains a Splitter. The problem is that the Splitter doesn't appear normally when I click the tab - the left pane has zero size, and the right pane is blank. If I expand the left pane, it shows normally.</p>
  
  <p>I found this problem here too: <a href="http://www.kendoui.com/forums/ui/splitter/splitter-within-tab-not-sizing-properly.aspx" rel="nofollow">Kendo UI Forum</a></p>
  
  <p>So I used the code provided: </p>
  
  <pre><code>$("#tabstrip").kendoTabStrip({
  animation: false,
  select: function(e) {
      setTimeout(function() {
          $(e.contentElement).find(".k-splitter").each(function() {
              $(this).data("kendoSplitter").trigger("resize");
          });
      });
  }
  });
  </code></pre>
  
  <p>And for some past kendo release it worked even with <code>animation:true</code>!</p>
  
  <p>However, after I started to use the Q3 beta, and now the full Q3, the above code ONLY works if I put an <code>alert("")</code> before the trigger command! With the alert it works fine, without it I get the old messed up results again.</p>
  
  <p>My current code is:</p>
  
  <pre><code>$("#tabstrip").kendoTabStrip({
      animation : {
          open : {
              duration : 200,
              effects : "fadeIn"
          }
      },
      select : function(e) {
          setTimeout(function() {
              $(e.contentElement).find(".k-splitter").each(function() {
                  $(this).show(500, function() {
                      alert("");
                      $(this).data("kendoSplitter").trigger("resize");
                  });
              });
          });
      }
  });
  
  $("#splitter").kendoSplitter({
      panes : [
          {
              collapsible : true,
              size : "17%",
              scrollable: false
          },
          {
              collapsible : false,
              resizable: false,
              scrollable: false
          },
          {
              collapsible : true,
              size : "20%",
              scrollable: false
          },
      ],
  });         
  </code></pre>
  
  <p>Am I forgetting something? The whole thing with the <code>alert("")</code> doesn't really makes sense, and of course I don't want an alert every time I select the tab.</p>
  
  <p>PS: If I put <code>animation:false</code>, then the code works without the <code>alert("")</code>, but I want to keep the animation as it is.</p>