Splitter doesn't drag until weird step is performed

[thenutjob]

For some reason, I have to disable the css height of my container, drag the splitter a random amount, and then re-enable the height property in order for the splitter to work. Until I do that I can't move the splitter at all. Any idea why this might be or how I could simulate that effect to get it to work?

To clarify, I have a vertical splitter of two divs and initially if you try to drag the splitter, nothing happens. However, if you hit F12 in Chrome (latest version), disable the height on the container, drag it a little bit, and then re-enable the height, then it works flawlessly.

Just disabling and re-enabling the height doesn't work and so does just dragging it. It has to be dragged while the height property is disabled. It's extremely weird and took me forever to figure out this workaround. Any idea why this might be or how I can fix it?

[thenutjob]

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?

[thenutjob]

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);

[nathancahill]

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

[thenutjob]

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;
});