Handsontable with materialize design not working properly

Tags: #<Tag:0x00007f0b0919dcd0> #<Tag:0x00007f0b0919d910>

Specially when I set the “fixedColumnsLeft”, then all the left columns have smaller height than the rest of the columns of the table, generating confusion.

My code:
const data = parm;
var conten = document.getElementById(‘gridBodyTableExcel’);
HoT = new Handsontable(conten, {
data,
height: “90vh”,

        colWidths: [40, 80, 390, 50, 80, 80, 80, 190, 250, 50, 50, 50, 50, 50, 50, 50, 50, 50],
        colHeaders: [
          'ID',
          'Codigo',
          'Nombre',
          'Traduccion',
          'Marca',
          'Lote',
          'Cantidad',
          'Estado',
          'Observacion',
          'FechaVencimiento',
          'UOM',
          'Cantidad UOM',
          'Unidad UOM',
          'Unidad per UOM',
          'Peso',
          'Cubico',
          'Valor',
          'Origen',
          'Grupo'
        ],
        columns: [
          { data: 'IdDocumentoDetalle', readOnly: true, type: "numeric" },
          { data: 'Codigo', readOnly: true, type: "text" },
          { data: 'Nombre', readOnly: true, type: "text" },
          { data: 'NombreTraduccion', readOnly: true, type: "text" },
          { data: 'Marca', readOnly: true, type: "text" },
          { data: 'Lote', readOnly: true, type: "text" },
          { data: 'Cantidad', readOnly: true, type: "numeric" },
          {
              data: 'DesMotivoRestriccion',
              type: 'autocomplete',
              source: listaTmpMotivo,
              allowInvalid: false,
              strict: true,
              options: {
                  items: 20 //`options` overrides `defaults` defined in bootstrap typeahead
              }
          },
          { data: 'ObservacionEstado', readOnly: false, type: "text" },
          {
              data: 'FechaVencimiento_string',
              type: "date",
              dateFormat: "DD/MM/YYYY",
              allowInvalid: false
          },
          { data: 'UOM', readOnly: true, type: "text" },
          { data: 'UnitQuantity', readOnly: true, type: "text" },
          { data: 'UnitUOM', readOnly: true, type: "text" },
          { data: 'UnitPerUOM', readOnly: true, type: "text" },
          { data: 'Peso', readOnly: true, type: "text" },
          { data: 'CubeM', readOnly: true, type: "text" },
          { data: 'Valor', readOnly: true, type: "text" },
          { data: 'Origen', readOnly: true, type: "text" },
          { data: 'Grupo', readOnly: true, type: "text" }
        ],
        afterChange: function (change, source) {
            if (source === 'loadData') {
                return; //don't save this change
            }
        },

        dropdownMenu: true,
        contextMenu: true,
        multiColumnSorting: true,
        filters: true,
        //afterGetColHeader: alignHeaders,
        //afterOnCellMouseDown: changeCheckboxCell,
        //beforeRenderer: addClassesToRows,
        outsideClickDeselects: false,
        rowHeaders: true,
        autoRowSize: true,
        manualColumnResize: true,
        renderAllRows: true,
        rowHeaderWidth: 22,
        fixedColumnsLeft: 2,
        colHeaderHeight: 120,
        manualRowMove: true,
        licenseKey: "non-commercial-and-evaluation"
    });
    var col = HoT.countRows();
    HoT.render();

Hi @dante.soto

Can you fill the example with the needed settings to replicate the issue https://jsfiddle.net/5ruw0zxf/? While testing it on Chrome 111/macOS Ventura it works well.

ps. you do not need to call the render() after you initialize the table, and it calls the render() itself.

Or if it depends on the number of elements, we can try this demo https://jsfiddle.net/5ruw0zxf/1/ with the function that generates a defined number of rows.

Hi Aleksandra,
The problem I think happens with the materialize.css (comes from the google’s material design ui)
With Bootstrap 4 or 5, I never faced any problem before. How can I add in your jsfiddle, the materialize css file so I can check if it works properly?

I update demo https://jsfiddle.net/fvyLgcp2/ but it does not seem to change anything (but the resources are imported from the CDN) from https://materializecss.com/getting-started.html. You can try to apply any class that you have or a classed container to see how it behaves.

Ok it seems like the custom css was forcing the height of the fixedColumnsLeft columns. Problem solved, thank you very much! Have a nice day.

I am more than happy to hear that. Thank you for the update.