Splitter doesn't drag until weird step is performed about split HOT 4 CLOSED

Figured it out. I'm using bootstrap tabs. It looks like the tab has to be active for it to load properly. Previously I was loading it on page load. I switched it to load when the tab becomes active for the first time and that fixed it. I think the disabling height, then dragging the splitter, and then re-enabling the height caused it to reinitialize and fix itself if I were to guess. Regardless, could this be made to work when it is not currently visible so my fix wouldn't be necessary?

from split.

Ok, this is really weird. Looks like I need a bit of a delay too. With only 100 milliseconds delay, the height is off a bit on the bottom div. If I use 500 millisecond delay, it works fine. Also, I have to manually set the height of the bottom div on load or else the size of the bottom div is way off and puts elements off-screen. Ended up getting it working but have to use this it seems, unless there is a better way:

 setTimeout(function() {
     Split(['#topDiv', '#botDiv'], {
        "direction": 'vertical',
        "sizes": [15, 85],
        "minSize": [75, 0],
        "gutterSize": 15
    });
    $('#botDiv').height('370px');
 }, 500);

from split.

Split.js depends on the container having layout when it's initialized. Can you make a simple JSFiddle that recreates the height issue?

from split.

It's all good. After I moved it to the "tab active code" it works now with no delay (but still have to set the height, but I don't really mind much since it's just one short line of jQuery). Final code:

$(document).on('shown.bs.tab', 'a[href="#tab-splittertab"]', function() {
  if (splitterLoaded) { return; }

  Split(['#topDiv', '#botDiv'], {
    "direction": 'vertical',
    "sizes": [15, 85],
    "minSize": [75, 75],
    "gutterSize": 15
  });

  $('#botDiv').height('370px');
  splitterLoaded = true;
});

from split.