angular-ui/ui-grid

UI Grid column auto width, two bugs are detected (with demo)

Open

#5,072 opened on Feb 6, 2016

View on GitHub
 (4 comments) (2 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
good first issue

Description

Please read the following post on stackoverflow:

jQuery(hiddenElement).width() is always zero when hiddenElement or its parent are hidden.

http://stackoverflow.com/questions/35246402/ui-grid-v0-3-1-column-auto-width-issue-detected/35246460#35246460

Here is an approach to fix it:

// Resize the grid on window resize events
          function gridResize($event) {
            grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm);
            grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm);
            console.log(grid.gridWidth);
            console.log(grid.gridHeight);
            if(!$($elm).is(':hidden') && grid.gridWidth > 0) { //add such if statement before                 
                grid.refreshCanvas(true); //this is UI Grid code
            }
          }

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptjQueryCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the gridResize function in the UI Grid source code. The issue suggests adding a hidden element check before calling grid.refreshCanvas. Locate the gridResize function and examine the current logic. Implement the fix by adding a condition to check if the grid element is hidden or has zero width. Test the fix with hidden grids to ensure proper resizing upon visibility. Consider any side effects on existing functionality.