fix: improve resizing column min width logic (#3589)

vaadin · Mar 23, 2022 · afe1316 · afe1316
1 parent 8f397a2
commit afe1316
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/grid/src/vaadin-grid-column-resizing-mixin.js b/packages/grid/src/vaadin-grid-column-resizing-mixin.js
@@ -58,7 +58,7 @@ export const ColumnResizingMixin = (superClass) =>
         const targetCell = columnRowCells.filter((cell) => cell._column === column)[0];
         // Resize the target column
         if (targetCell.offsetWidth) {
-          const style = window.getComputedStyle(targetCell);
+          const style = getComputedStyle(targetCell._content);
           const minWidth =
             10 +
             parseInt(style.paddingLeft) +

diff --git a/packages/grid/test/column-resizing.test.js b/packages/grid/test/column-resizing.test.js
@@ -116,6 +116,19 @@ describe('column resizing', () => {
     });
   });
 
+  it('should set min width based on cell content padding', () => {
+    const options = { node: handle };
+    const rect = headerCells[0].getBoundingClientRect();
+
+    const contentStyle = getComputedStyle(headerCells[0]._content);
+    const padding = parseInt(contentStyle.paddingLeft) + parseInt(contentStyle.paddingRight);
+
+    fire('track', { state: 'start' }, options);
+    fire('track', { state: 'track', x: rect.left - 100, y: 0 }, options);
+
+    expect(headerCells[0].clientWidth).to.be.greaterThan(padding);
+  });
+
   it('should not listen to track event on scroller', () => {
     const scroller = grid.$.scroller;
     fire('track', { state: 'start' }, { node: scroller });