Column type handsontable not visible for the last rows and for right columns

Getting help Questions
1

Good morning
I’ve problem to see the info when I click on the cell defined like ‘handsontable’.
This happen for the cells in the last rows or in the last right columns.

Here is a part of my code:
columns: [
{ data: ‘ID’, type: ‘numeric’, readOnly: true, className: “htCenter”},
{ data: ‘Famiglia’, type: ‘text’ },
{ data: ‘SapCode’, type: ‘text’, className: “htCenter” },
{ data: ‘SapName’, type: ‘text’ },
{ data: ‘ItemCode’, type: ‘text’, className: “htCenter” },
{ data: ‘LogoCE’, type: ‘checkbox’, className: “htCenter” },
{ data: ‘LogoUL’, type: ‘checkbox’, className: “htCenter” },
{ data: ‘LogoATEX’, type: ‘checkbox’, className: “htCenter” },
{ data: ‘Title1’, type: ‘text’ },
{ data: ‘Title2’, type: ‘text’ },

        { data: 'Key01', type: 'dropdown', className: "htCenter", source: ['V'] },

        {
            data: 'Key02', type: 'handsontable', className: "htCenter",
            handsontable: {
                width: 500,
                colHeaders: ['key', 'dex'],
                autoColumnSize: true,
                manualColumnResize: true,
                data: Attributo03,
                columns: [{ data: 'Value' }, { data: 'DexAll' }],
                colWidths: [30, 470],
                getValue: function () {
                    var selection = this.getSelectedLast();     
                    return this.getSourceDataAtRow(selection[0]).Value;
                },
            }
        },

        // colonna rossa di separazione abbinata a chiave 03
        { data: 'Key03', type: 'text', className: "htCenter", renderer: redColumnRender },

…

Like you can see the menu is cut …

image.png1589×757 140 KB

image.png1618×536 45 KB

Please may you help me ?
Thanks
Best regards

2

Hi @crepuscolog

Can you send a demo where this issue can be replicable? I am sure that it is related to the CSS settings of the container or its parent.

3

Good morning
Here is a link with demo.

Here is the problem when i click the pop up window will not show completely.

image.png1237×700 59.2 KB

image.png875×741 46.5 KB

Thanks
Best regards

4

Hi @crepuscolog

I do not know if I’d be able to help you much with this example as mainly it depends on the parents CSS settings. Here are the examples.

  1. window as a parent

  2. Parent with fixed dimensions and overflow: scroll

  3. Parent with fixed dimensions and overflow: hidden

And it’s a general rule that we are not currently able to change.

5

Good morning.
I have a more cool solution.
Here is:

/* listbox */ .handsontable .listbox { background: #F0E68C; top: -100px !important; } var htTypeHeight = 400; // popup window height var ht = $('#dataTable').handsontable('getInstance'); // click on the dropdown triangle button ht.addHook('afterOnCellMouseDown', function (event, coords, TD) { // Header if (coords.row == -2) { // .......ToDo }; } else if (coords.row >= 0) { is a cell is not a header var myoffsetTop = TD.offsetTop; // offset: depend by scroll position of the cell in the grid var myCellHeight = TD.clientHeight; // cell height MoveHandTypeCellWindow(myoffsetTop, myCellHeight); } }); // In case of Return or F2 on the cell ht.addHook('afterBeginEditing', function (row, column) { var plugin = ht.getPlugin('AutoRowSize'); // get first visible row e cell height var firstVisRow = plugin.getFirstVisibleRow(); var myCellHeight = ht.getRowHeight(row); // offset: 90 in my button bar, 130 the header 1 height, I add also the header2 height (+ myCellHeight) // (row - firstVisRow) * myCellHeight): height in pixel of the visible rows var myoffsetTop = 90 + 130 + myCellHeight + ((row - firstVisRow) * myCellHeight) MoveHandTypeCellWindow(myoffsetTop, myCellHeight); }); function MoveHandTypeCellWindow(myoffsetTop, myCellHeight) { // dim local var myHeight = window.innerHeight - 90 - 10; // -90 header height -10 gap to be more sure var myNewTop = 0; // new start position of the window popup // if the popup window is not all visible if (myoffsetTop + htTypeHeight > myHeight) { myNewTop = -htTypeHeight - myCellHeight - 5; // negative value so the start position of the popup is above and is egual to the window height - 5 gap to be more sure. } // take rule .handsontable .listbox from the css var mysheet = document.styleSheets[0]; var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; // loop on all the css rules for (i = 0; i < myrules.length; i++) { if (myrules[i].selectorText == ".handsontable .listbox") { // find myrules[i].style.top = myNewTop + "px"; // change the top break; } } }
1 Like
6

7

looks great @crepuscolog