Table and dropdown issues when inside a parent with overflow set to auto

anthony.agostino · November 18, 2025, 10:44pm

I think this is a known thing, but I cannot figure out a solution.

The entire wrapper for our application has an overflow-y: auto property, for whatever reason. That’s pretty much out of my control as it affects the whole app. I’m placing multiple Handsontables inside a modal/drawer, which also has an overflow-y: auto property - but that I can control.

As you probably know already, and as you can see in this StackBlitz, a parent with this property basically breaks Handsontable. I understand I could add a set height for the table itself, but I would really like to know if there is another way.. I do not want the table to be of a set height because the surrounding components are then pushed far away and this table rarely has that many tows. This is all to just be able to see the entire contents of a dropdown, by the way.

Really the main issue is that, somewhere along the way, the div recognizable by the classes ht-wrapper handsontable htRowHeaders receives a style of overflow: hidden and I don’t know why or how I can prevent that.

Any workarounds? Even if I set the height on the table, it must be huge to be able to display a large list of dropdown values and that looks pretty bad on screen.

aleksandra_budnik · November 19, 2025, 9:47am

Hi @anthony.agostino

It seems that there is just one CSS setup you are missing. Please check this demo handsontable (duplicated) - StackBlitz

We set the

#hot-instance {
  height: 100%;
}

which should also work fine if you decide to use vh instead of % values.

Would that meet your requirements?

anthony.agostino · November 19, 2025, 2:44pm

Ah no, unfortunately not, because you also set a static height in the container.

anthony.agostino · November 19, 2025, 3:02pm

I would just love to know how to stop Handsontable from applying overflow: hidden automatically.

<div class="ht-wrapper handsontable htColumnHeaders" dir="ltr" id="ht_af1f06d42092159e" aria-rowcount="-1" aria-colcount="6" role="treegrid" aria-multiselectable="true" style="height: 85px; overflow: hidden;">

I’ve gone through this doc several times but the solution is always a fixed height. I really cannot have a fixed height, and I just want to be able to see the dropdown menus. For some reason, the date picker doesn’t care about overflow (although it has it’s own problems of going off the page entirely..)

github.com/handsontable/handsontable

docs/content/guides/getting-started/grid-size/grid-size.md?plain=1

518464629


      
          Set the width and height of the grid, using either absolute values or values relative to the parent container.
          
          [[toc]]
          
          ## Set your grid's size
          
          You need to define the grid's container as a starting point to initialize it. Usually, the `div` element becomes this container. This container should have defined dimensions as well as the rest of your layout. Handsontable supports relative units such as `%`, `rem`, `em`, `vh`, `vw`, and `px`.
          
          ### Define the size in your CSS
          
          Both `width` and `height` could be defined as inline styles or as a CSS class property. In this case, it's important to define what should be an `overflow` parent properly. Handsontable looks for the closest element with `overflow: auto` or `overflow: hidden` to use it as a scrollable container. If no such element is found, a window will be used.
          
          ::: tip
          
          Handsontable doesn't observe CSS changes for containers out of the box.
          If you'd like to observe it, you can define the dimensions in the configuration object or create your own observer.
          
          :::
          
          ### Pass the size in the configuration

anthony.agostino · November 19, 2025, 4:31pm

I kind of give up at this point - now I am trying to create a custom editor with React. Unfortunately nothing in the documentation works, and seems outdated or just wrong. Do you have any examples of actually creating working custom editors in React?

Edit: was able to find this

aleksandra_budnik · November 20, 2025, 8:00am

Hi @anthony.agostino

I asked our developer for additional feedback and I got the following demo handsontable (duplicated) - StackBlitz and the explanation

the values don’t have to be px, it can be any value but some height must be set or inherited - if the div doesn’t have a height then the table has nowhere to get it from, unless you give it auto and it expands, but with overflow we can’t do much because it probably serves some purpose

When it comes to editors, now it might be tricky. You need to follow the following rules Cell editor - JavaScript Data Grid | Handsontable and there is no demo to test. However, we are planning to improve cell editors in Q4/25 - Q1/26. It that helps I have a vanillajs example of a custom editor and renderer Handsontable example - JSFiddle - Code Playground .

anthony.agostino · November 20, 2025, 4:07pm

Yes that makes sense about the height. It would be great if Handsontable had a dropdown version or option to use absolute position like the datepicker because the existing one gets hidden in a small table with few rows if you are unable to set a large static table height. The tables I am constructing consist of only a few rows, so the dropdown is not even visible.

I was able to use the cell editor which in the end is actually quite impressive; that I was able to throw in an existing React Select component and then just absolute position its parent. After some hacking around it works for me just how I want it.

I hope you guys can also improve the datepicker in a similar way - I know it’s a tough one but when it’s at the edge of a table, it is un-usable (maybe it could pop up, or just have smarter positioning, like the middle of the table, idk!).

Thanks.

aleksandra_budnik · November 21, 2025, 8:50am

Thank you for feedback. I’‘m glad that you were able to create the editor.

In the future (with a project on our Roadmap mentioned above) you’ll be able to replace our datapicker with any editor of your choice easily.