angular-ui/ui-grid

UI Issue with injecting custom filters template

Open

#4,498 opened on Oct 9, 2015

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

Description

I am trying inject custom filters (Angualr ui-select controls) using filterHeaderTemplate property. Filter controls are getting rendered successfully but facing UI issues.

Filter controls are not visible properly.

image

As control is rendering in "ui-grid-header-canvas" element, because of overflow-hidden property it is happening.

But, when I added following styles

.ui-grid-header-viewport { overflow: visible; }

.ui-grid-top-panel { overflow: visible; }

.ui-grid-cell > .ui-grid-cell-contents { overflow: visible; }

grid becomes

image

Is there any way where it can be rendered properly?

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.
mostly clear
Prerequisites
CSSAngularJS basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the ui grid header canvas element's overflow property and the CSS workaround provided in the issue. Determine if a more targeted CSS fix or a code change in the grid's template can render custom filters without breaking the layout. Check for any existing PRs or comments that propose a solution.