Header row behaviour during scrolling (using Bootstrap V4)

Getting help Questions
1

I’m using CE 0.37, along with Bootstrap V4 (my CSS details below in case they are relevant) and noticed that though I have scrolling ~working, the behaviour is that the header row scrolls up and away as I scroll down. This is in contrast to my expectation that the header row should remain visible, and also with the various demos and samples I see dotted around the place.

I suspect that my container settings are part of the problem: I am using a fixed width/height with NO overflow setting. The demo linked above says the container should have fixed width/height and “overflow: hidden”, but when I try that, I get no scrollbars at all. My current container settings and the surrounding context are as follows:

<div class="tab-content col-sm-12 table-responsive" style="padding-left: 0" id="nav-tabContent">
<div class="tab-pane fade handsontable htColumnHeaders active show" style="width: 100%; height: 400px;" id="nav-Logs" role="tabpanel" aria-labelledby="nav-Logs-tab" data-initialstyle="width: 100%; height: 400px;" data-originalstyle="width: 100%; height: 400px;">
<div class="ht_master handsontable" style="position: relative;">
<div style="position: relative; width: 1110px; height: 414px;" class="wtHolder">

I’m not especially familiar with Web front end development, but to my eye (using Firefox’s debug facilities) it looks as though the scrollbars I get (without “overflow” being set) might actually be provided by the container, not HOT. Am I right in thinking that the key is to get scrolling working with “overflow: hidden”? I’d appreciate any pointers or hints.

Thanks in advance, Shaheed

P.S. Here are my homebrewed Bootstrap V4 CSS integration settings (none of the integrations I found using Google appeared up-to-date, or even working):

<style>
    .copyPaste,
    .ht_clone_left,
    .ht_clone_top,
    .ht_clone_top_left_corner {
        display: none;
    }
    .ht_master thead,
    .ht_master .rowHeader {
        background: hsl(230,20%,75%);
    }
    .wtBorder {
        display:none !important;
    }
    .columnSorting::after {
        content: " ◆";
        color: hsl(230,20%,55%);
    }
    .columnSorting.ascending::after {
        content: "▲";
    }
    .columnSorting.descending::after {
        content: "▼";
    }
</style>
2

Hi @srhaque

Here is a conversation about the overflow behavior https://github.com/handsontable/handsontable/issues/3432

Can you share a demo? It would be easier to test some approaches.

3

I put up a sample here on jsfiddle. To try it out:

  1. Click “Run”.
  2. Click on the “Logs” tab.
  3. Click on the “A” column header.

This works fine in that a scrollbar will appear to the right, and this scrolls the body while leading the column headers static. The problem is that this is not using the style I want, so now:

  1. From the sidebar on the left, remove the handsontable.full.min.css file.
  2. In the CSS window, comment out the “overflow: hidden” on line 44.
  3. Repeat the previous steps to run the demo.

Observe that I get the styling I want, but the scrollbar now scrolls the column headers too. As I mentioned, I think the scrollbar in this case is provided by the parent of the HOT container. However, re-adding the “overflow: hidden” simply causes there to be no scrollbar at all.

This suggests that my .css inlines is doing something wrong with regard to the deleted handsontable.full.min.css file, but I cannot see what.

4

I am not sure if that is what you were looking for but if you would like to style/overwrite Handsontable elements you need to refer to hadsontable class, not the hot-container

5

I’m not sure I understand your hint to apply styling to the handsontable:

  1. Multiple elements have the class “handsontable” applied by HOT. Which element are you saying should be styled? The jsfiddle does, as you noticed, apply the fixed size/hidden styling to the hot-container. I have checked and this element (along with others) does have the class “handsontable”.
  2. The docs https://docs.handsontable.com/0.37.0/demo-scrolling.html clearly state the styling should be applied to the container, which I take to mean the first argument to the HOT constructor. Is that an incorrect understanding?
6

Hi @srhaque

I just got a demo from our programmer https://jsfiddle.net/hhqsuggz/.
Please let me know if that is what you were looking for.

7

I can see what the wtBorder change does, so that is great, but beyond some additional styling/colouring changes I’m not sure I see quite what is different. Perhaps I need to explain the background to this issue?

I want to use Bootstrap styling for my HOT content, by which I mean things like hover effects, alternate row colouring and so on. In my experiments, it seems that using HOT-supplied handontable.full.min.css clashes with Bootstrap-supplied bootstrap.min.css so I am attempting to live WITHOUT handsontable.full.min.css.

Clearly, I need to replace it with something, and it is that minimal replacement CSS content required to make HOT functional that is my goal. My underlying assumption is that this SHOULD be possible. In my attempt, I found this easy to do except that my attempt seems to somehow disable HOT’s internal scroll logic. In essence, the question is “what signal/property does HOT use to enable its internal scroll logic”?

I hope that make my question clearer?

Thanks!

8

Sorry, but the CSS of Handsontable aren’t easily converted to a minimum needed settings. You would need to check CSS settings for all the plugins that you use in the table.

9

I see. Thanks for taking a look…it is much appreciated.

10

You’re welcome.

Let me know if you’d need some help with anything else.

11

For the record, I found and fixed the problem. The solution actually required NO messing about with the HOT css, I just included it again. What was wrong? Well, it turned out that the hover and alternate row striping colours used by Bootstrap were so subtle, they simply did not show up…so all I needed to do was to chose different colours.

FWIW, this is the css I used w.r.t. HOT:

.hot-parent {
    padding-left: 0;
}
.hot-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.handsontable th {
    color: black;
    background-color: hsl(230,20%,75%);
    border: none;
    font-weight: 700;
    text-align: left;
}
.handsontable tr,
.handsontable td  {
    background: hsla(76,34%,80%,0.7);
}
.handsontable .columnSorting::after {
    content: " ◆";
    color: hsl(230,20%,55%);
}
.handsontable .columnSorting.ascending::after {
    content: "▲";
}
.handsontable .columnSorting.descending::after {
    content: "▼";
}
.table-hover > tbody > tr:hover {
  background: hsla(0,0%,0%,0.2);
}
12

Ohh, so that was it.

I am happy that you have solved it out.