Table is gone after change

Tags: #<Tag:0x00007efc64dfe3e8>
#1

Hello

I’ve been struggling with this for the past days. The data loads fine but after I make a change the entire table just disappears.

var data1 = [{ "accountName": "Rekening", "transactionDate": "2020-04-06T00:00:00", "payeeName": "Proximus", "category": "Rekeningen", "note": "TEST", "inflow": 0, "outflow": 9425, "cleared": true, "id": 1 }];
let container = document.getElementById('transactionsTable');
let hot = new Handsontable(container, {
    data: data1,
    startRows: 1,
    rowHeaders: true,

    filters: true,
    dropdownMenu: true,
    licenseKey: 'non-commercial-and-evaluation'
});

Before change:

image
image.png773×108 4.53 KB

After change:

image
image.png946×90 719 Bytes

#2

Hi @maarten1055

the settings are fine. The issue might be related to the container settings. What CSS do you use on the site (frameworks?) and for the Handsontable container? Do you load it in an iframe or a window?

#3

Hello @aleksandra_budnik

So, I didn’t even think about the CSS and apparently that’s exactly what’s wrong.

I use this Bootstrap template: https://colorlib.com//polygon/adminty/default/handson-data-operation.html

I have to use these classes:

<div class="table-responsive scroll-container">
        <div id="transactionsTable">

        </div>
    </div>

I didn’t use scroll-container which contains this CSS:

.scroll-container {
    overflow-x: hidden
}
.scroll-container .wtHolder {
    height: 350px !important
}

.scroll-container #highlighting .wtHolder, .scroll-container #populating .wtHolder, .scroll-container #paginating .wtHolder, .scroll-container #searching .wtHolder, .scroll-container #drag .wtHolder, .scroll-container #validation .wtHolder, .scroll-container #readOnly .wtHolder, .scroll-container #nonEditable .wtHolder, .scroll-container #numericData .wtHolder, .scroll-container #dateDate .wtHolder, .scroll-container #timeData .wtHolder, .scroll-container #checkbox .wtHolder, .scroll-container #select .wtHolder, .scroll-container #dropdown .wtHolder, .scroll-container #autocomplete .wtHolder, .scroll-container #jQuery .wtHolder, .scroll-container #chromaJS .wtHolder, .scroll-container #context .wtHolder, .scroll-container #configuration .wtHolder, .scroll-container #copyPaste .wtHolder, .scroll-container #buttons .wtHolder, .scroll-container #comments .wtHolder {
    height: auto !important
}

My CSS knowledge is limited but could this be it?

#4

Handsontable needs to be provided with fixed height and width. Can you try to comment out theoverflow-x and height: auto ?

#5

That did the trick. It works now.

Thank you!

#6

Great :slight_smile: Thank you for the update.

#7