angular-ui/ui-grid

Header's width doesn't match up with column's width when zoom is not 100%

Open

#4,944 opened on Jan 11, 2016

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

Description

When I change the zoom level, for example, 125% or 150% Column's alignment is a little bit broken. wrong width

Above image is from http://plnkr.co/edit/sJ2DZrcR5h8I5unNfduo?p=info. It is a example from your tutorial. In my case, header's width is 77.6 px. But, the column below the header is only 77px.

Is there any clues to understand this? Or What I was wrong?

Thx

Contributor guide

Tech stack
javascriptangularcss
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
CSS width conceptsbrowser zoom behavior
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Examine the grid's CSS and JavaScript to understand how header and column widths are computed, especially during zoom. The provided plunkr (http://plnkr.co/edit/sJ2DZrcR5h8I5unNfduo?p=info) reproduces the issue. The fix may involve ensuring that both header and column use the same measurement logic or adjusting for sub pixel rounding differences.