angular-ui/ui-grid

enableColumnResizing creates unexpected ui-grid-column-resize div when filtering or hide column

Open

#6,574 opened on Feb 14, 2018

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

Description

I am currently following the example in API/uiGridColumnResizer

The original code of the script.js is like this

`var app = angular.module('app', ['ui.grid', 'ui.grid.resizeColumns']);

app.controller('MainCtrl', ['$scope', function ($scope) { $scope.gridOpts = { enableColumnResizing: true, data: [ { "name": "Ethel Price", "gender": "female", "company": "Enersol" }, { "name": "Claudine Neal", "gender": "female", "company": "Sealoud" }, { "name": "Beryl Rice", "gender": "female", "company": "Velity" }, { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" } ] }; }]);`

After I added these two features to the controller app.controller('MainCtrl', ['$scope', function ($scope) { $scope.gridOpts = { enableColumnResizing: true, enableGridMenu:true, enableFiltering:true, data: [ { "name": "Ethel Price", "gender": "female", "company": "Enersol" }, { "name": "Claudine Neal", "gender": "female", "company": "Sealoud" }, { "name": "Beryl Rice", "gender": "female", "company": "Velity" }, { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" } ] }; }]);`

This is the plunker that can reproduce the issue http://plnkr.co/edit/hZK2TwsMNqE5XvDQGVTN When hiding the 1st and 2nd column, or filtering, the grid unexpectedly creates a line, which is the div.ui-grid-column-resize next to the gridmenu, but is useless

How can I solve this problem? image

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
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
AngularJSui grid basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
The bug is that when enabling column resizing with filtering and column menu, hiding or filtering columns creates an unexpected div.ui grid column resize line next to the grid menu. Start by examining the ui grid column resizer directive in the resize columns feature (likely in src/features/resize columns/). The plunker provides a reproduction. Check how the resizer elements are created and destroyed, especially when columns are hidden or filtered. Look at the interaction with ui grid menu and the column rendering lifecycle. There are no linked PRs, but the issue comments may provide additional context.