wtHider class introduces horizontal scroll when screen width is reduced

Tags: #<Tag:0x00007f8b19cbc950>
#1

37
Screenshot 2022-01-05 at 16.59.37.png1297×390 16.5 KB
22
Screenshot 2022-01-05 at 16.58.22.png1275×265 6.92 KB
13
Screenshot 2022-01-05 at 16.58.13.png1274×340 6.64 KB

Why this happens and how to solve it?

#2

Hi @perpetualwarr

Can you please share a code demo or just Handsontable configuration object? That would help to better understand the issue.

#4 
const hotTableSettings = computed(() => {
    return {
      data: tableDataRef.value,
      startRows: 5,
      startCols: 5,
      colHeaders: true,
      rowHeaders: false,
      rowHeights: 40,
      columnHeaderHeight: 40,
      colWidths: 200,
      stretchH: 'all',
      preventOverflow: 'horizontal',
      columnSorting: true,
      hiddenColumns: {
        columns: [0, 1],
      },
      contextMenu: {
        items: {
          remove_row: { name: 'Remove row' },
          undo: {},
          cut: {},
          separator: ContextMenu.SEPARATOR,
          copy: {},
        },
      },
      minSpareRows: 1,
      multiColumnSorting: false,
      licenseKey: 'non-commercial-and-evaluation',
      cells(row, column, prop) {
        return {
          className: cellClassName,
        };
      },
      beforeColumnSort: beforeColumnSort(sortingValue, hotColumnHeaders),
      afterGetColHeader,
      afterChange: afterChange(hotTableRef, emit),
      beforeRemoveRow: beforeRemoveRow(tableDataRef, emit),
      afterRemoveRow: afterRemoveRow(hotTableRef, emit),
    };
  });

Here is my config object.

Basically, when I open mobile or tablet view, and decrease the width, table visually shrinks (as supposed to), but some invisible container called wtHider remains with full width, and introduces horizontal scroll.

I want table to shrink down to 200px cell width minimum, but not to introduce invisible container and horizontal scroll.

#5

Hi @perpetualwarr

Here’s a little solution that might help: https://jsfiddle.net/aszymanski/uz91ckjt/7/

What I did is basically set the CSS for wtHide to always have width of 100% instead of pixel value. I also disabled the horizontal scroll.

Do let me know if that helps and that’s what you needed.

1 Like
#6

Tt seems to be working. I don’t even need to apply overflow hidden, 100% width seems to be enough.

#7

That’s great to hear!

#8