Handsontable - 水平滚动条消失

Question

I have created four Handsontable instances split evenly accross four windows using a library called split.js.

I have then enabled scroll bars on each window by setting the containers overflow to auto.

#equipment {
  overflow: auto;
}

This successfully displays the scroll bars in the vertical position under all GUI manipulation.

However, the horizontal scroll bars are a bit more buggy. Specifically, on initial load of the windows the horizontal scroll bars are nowhere to be seen. But on dragging the split.js gutters the scroll bar magically appears again! But then on clicking the handsontables within the containers the horizontal scroll bar disspears again (to the base of the handsontable). See image below.

I have also created a fiddle that shows this issue.

https://jsfiddle.net/JoshAdams/4p8jLcnk/

So my question is how do I make the horizontal scroll bar always be displayed under all circumstances above?

Answer 1

The overflow:auto was on an element that had a height higher than it's parent. The parent had overflow:hidden , so the horizontal scroll on the child element was hidden from view. I wasn't sure if you wanted the on hover scroll bars, so I have added it to the CSS but commented it out. Here is an updated fiddle.

https://jsfiddle.net/4p8jLcnk/9/