angular / angular/components

ability to manually control overlay's z-index

Open
#1,432 20 comments 30 reactions 0 assignees View on GitHub
area: cdk/overlay feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

This would be handy for both user created overlays, as well as those used by angular components such as md-menu.

Take this for example http://plnkr.co/edit/AqjYdsScCYPlK9w44aHQ?p=preview you have a fixed element(some sort custom toolbar), inside it you have a button which triggers md-menu, it works fine, but the `md-menu-click-catcher`, which is for some reason inside the actual `md-menu` element, is actually stacked above `md-overlay-container`, causing any attempt to click on the menu items to close the menu(which can be extremely confusing).
1. `md-overlay-container` should _not_ have z-index at all, as it renders z-indexes of `md-overlay-pane` useless
2. you should be able to manually control z-index of `md-overlay-pane`

I imagine(at least for the user invoked overlay), it could work either by being able to give the overlay my own identificator(class at least), or being able to set it via `OverlayState` settings.. the former is preferable, as you can then easily switch z-indexes with media queries.

Contributor guide

Open the contributing guide

Research direction

Start by locating the overlay implementation and the elements named md-overlay-container, md-overlay-pane, md-menu-click-catcher, and OverlayState. Reproduce the linked md-menu stacking problem, then determine how manual pane z-index control and removal of the container z-index should work without breaking user-created or Angular component overlays.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.