angular-ui/ui-grid

100% width with grids and tabs

Open

#6,777 opened on Jun 27, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
help wanted

Description

This is a bit tricky to replicate, but I'll update the issue with a plunkr if I manage to get it.

I have 3 tabs (bootstrap library - uib-tab) with a grid in each and css with width: 100%. The horizontal scrolling sometimes is out of sync (i.e. header doesn't scroll but rows do) and seems quite similar to #2592. I don't think it's the same because when I look at the DOM in Chrome Dev Tools, I notice that the "broken" grid has .ui-grid-viewport { width: 100%0px; ... } which obviously doesn't work and seems to be the issue.

I'm not entirely sure why this happens. It seems like a bit of a race condition. I'm calling gridApi.core.refresh() and gridApi.core.handleWindowResize() on tab change, but it's not helping.

Contributor guide

Tech stack
javascriptcss
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.
1-3 hours
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.
needs investigation
Prerequisites
AngularJS basicsCSS layoutUI Grid core API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue involves a race condition in the width calculation of `.ui grid viewport` when switching tabs. The reporter noted that the broken state shows `width: 100%0px`, suggesting a CSS value parsing error. Investigate the `gridWidth` and viewport sizing logic in `src/features/core/js/ui grid.js`, particularly the `handleWindowResize` and `refresh` methods. Compare with issue #2592 for similar scrolling sync problems. Reproduce by setting up three uib tabs with 100% width grids and toggling between them while monitoring the viewport element's computed style in Chrome DevTools.