Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style overlay backdrop for specific dialogs #2806

Closed
YeomansIII opened this issue Jan 25, 2017 · 2 comments · Fixed by #2822
Closed

Style overlay backdrop for specific dialogs #2806

YeomansIII opened this issue Jan 25, 2017 · 2 comments · Fixed by #2822

Comments

@YeomansIII
Copy link
Contributor

YeomansIII commented Jan 25, 2017 •
edited
Loading

Feature Request

What is the expected behavior?

Specify custom CSS classes for overlay backdrops for certain dialogs.

What is the current behavior?

Backdrops can not be individually styled. If I wanted to remove or style a backdrop it would have to be styled for all backdrops on all dialogs.

What is the use-case or motivation for changing an existing behavior?

To remove/style backdrops for specific dialogs. One dialog may not need a backdrop, or a backdrop with a different color or opacity.
@YeomansIII
Copy link
Contributor Author

YeomansIII commented Jan 26, 2017 •
edited
Loading

I see OverlayState has the option of whether or not to include a backdrop.
https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.ts#L143

Perhaps this option could be passed through the MdDialogConfig. That seems like a very easy change and I could make a pull request.

Still investigating how a custom CSS class could be applied to the backdrop.
This exists, but it looks it's been inactive for a few months. It also seems like they were making the change for a different purpose.

YeomansIII added a commit to YeomansIII/material2 that referenced this issue Jan 26, 2017
@YeomansIII
feat(dialog): add hasBackdrop and backdropClass options to dialog config
9b103fe 
Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default `cdk-overlay-dark-backdrop` class, allowing custom styling to be applied.

Closes angular#2806
@YeomansIII YeomansIII mentioned this issue Jan 26, 2017
Merged
YeomansIII added a commit to YeomansIII/material2 that referenced this issue Apr 19, 2017
@YeomansIII
feat(dialog): add hasBackdrop and backdropClass options to dialog config
e6a9323 
Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default `cdk-overlay-dark-backdrop` class, allowing custom styling to be applied.

Closes angular#2806
mmalerba pushed a commit that referenced this issue Apr 25, 2017
@YeomansIII @mmalerba
feat(dialog): add hasBackdrop and backdropClass options to dialog con…
7428c49 
…fig (#2822)

* feat(dialog): add hasBackdrop and backdropClass options to dialog config

Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default `cdk-overlay-dark-backdrop` class, allowing custom styling to be applied.

Closes #2806

* rebase master and fix conflicts
@willshowell willshowell mentioned this issue May 11, 2017
Closed
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(dialog): add hasBackdrop and backdropClass options to dialog config YeomansIII/material2
2 participants
@jelbourn @YeomansIII