angular-ui/ui-grid

Incorrect header height with filters and pinning

Open

#6,979 opened on May 15, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (2,496 forks)batch import
grid-corehelp wanted

Repository metrics

Stars
 (5,395 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Hi all,

The header height is incorrectly computed when:

  • Pinning more than one column left
  • Disabling the filters on all the other columns

image

If pinning only one column left, the behaviour is as expected.

For a year now I have hacked into the CSS classes to set the unfiltered headers height manually, however for reasons unknown to me it now fails on Chrome from time to time.

As much as I could track the differences between what is working and not, the ui-grid-header-canvas class sometimes get set to a fixed height of 29px instead of inherit, which causes the difference. But I couldn't find a way to force it there as the classes are generated.

Reproduced on versions 4.4.11 and 4.7.1

Here's a plunker: http://plnkr.co/edit/gkfdQAjGn1w81EWaIzX8?p=preview

Any help (or even better workaround) appreciated.

Contributor guide

Research direction
Reproduce the issue using the provided Plunker. Inspect the CSS classes 'ui grid header canvas' and the JavaScript logic that computes header heights. Focus on the interaction between column pinning and filter visibility. Trace the code that sets fixed height values and identify why it becomes 29px instead of inherit.
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.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSAngularGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75