Components: Md-dialog config backdropClass has either a bug or awkward functionality which removes .cdk-overlay-dark-backdrop class and access is only on sibling div

[xtianus79]

Bug, feature request, or proposal:

Bug? proposal?

What is the expected behavior?

When using the configuration backdropClass and setting a custom class the original overlay css should remain. I believe the implication here is that a person would want their own backdrop class to color the overlay.

Also, one consequence of this is it is nice to have a class that is custom per the dialog box however, one can only reach the sibling div by adding a + or ~ operator to the css class.

What is the current behavior?

this class is removed
.cdk-overlay-dark-backdrop {
background: #000;
}

What are the steps to reproduce?

any plnkr will show this

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

Adding a class should be the requisite for removing a class... I mean a simple override would have the same affect. The ability to add a class allows for full customization per dialog box which is better functionality. If the purpose is to remove the class and then add ones own class that should be a 2 step configuration process or at least let the api give that particular twofer option

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

ang 4.2.0.beta1 Material 2.0.0-beta.5

Is there anything else we should know?

nope.

[YeomansIII]

I'm confused about what exact issue you are having.

You said "I believe the implication here is that a person would want their own backdrop class to color the overlay." As you saw, the cdk-overlay-dark-backdrop class has one property, which is to set the background color. Another default class also exists cdk-overlay-transparent-backdrop which is used for menus and other things. These are set using the OverlayState.backdropClass property. So when you supply your own custom backdropClass you are replacing the default one that is applied to the dialog backdrop. This class, by default, is only used to apply a background color. The class cdk-overlay-backdrop will still be applied to the same element and still includes all of the necessary positioning and sizing properties for the backdrop. By supplying your own class, you can create different dialogs with different backdrops, maybe some transparent or some funky colors, or even do something completely unrelated to just background color.

[xtianus79]

@YeomansIII What you say create different dialogs (I get the backdrop point) that would imply there is a class on a parent div affecting the dialog modal differently from modal to the next. This is not the case... The class gets added to the overlay field leaving only the sibling div which house the modal being accessed only by a + (sibling) or ~ css class.

[YeomansIII]

I think what you want is a separate feature from backdropClass. It seems like you are trying to apply custom CSS to the overlay-pane, correct? And you want to use this backdropClass field to do that, which isn't possible (without the sibling selectors you mentioned) and was not the intended purpose of this feature. This backdrop class _is_ unique per dialog, as overlays overlap each other.

Am I correct in understanding that you are trying to apply CSS to the dialog's overlay-pane or the md-dialog-container itself?

[xtianus79]

No the overlay pain, which is affected by the backdropClass param, is a nice feature... All I was saying for that is that I wish it didn't actually remove the other class unless it was told to do so... but I kind of could go either way based on the point you made above.

But more importantly changing the actual dialog content per modal popup one has on any particular component is much more desirable. As of now, using the sibling selector works but I believe there should be a more direct approach for the area of the md-dialog-container

[YeomansIII]

I'm curious about what your use-case is, what are you trying to style outside of the domain of the actual component itself?

Also, the class cdk-overlay-backdrop is always applied to the backdrop, regardless of what class you apply with the backdropClass property. Couldn't you target this class instead of cdk-overlay-dark-backdrop?

[xtianus79]

@YeomansIII the use case is that we have different modals for different purposes. For example sometimes we take snippets of our web pages and use them inside of modals to quick access to information.

Other modals might be totally different which are simple error messages or informational type modals. The use cases are many

[xtianus79]

@YeomansIII any update on this?

[YeomansIII]

@xtianus79 Still not sure what the issue is. What you described are differences that can take place in the dialog component's HTML and CSS. Why do you need the backdrop class to style the inside of a component? The backdrop class should only be used to apply a background color to the overlay, just as cdk-overlay-dark-backdrop is doing.

[willshowell]

@xtianus79 not totally certain what functionality you're looking for, but does https://github.com/angular/material2/pull/4722 help? It allows you to pass additional classes the cdk-overlay-pane. You can then use that to target you md-dialog-container since it is a child.

Combined with @YeomansIII's point about the cdk-overlay-dark-backdrop only affecting the single background style of the cdk-overlay-backdrop, you should be able to manipulate everything without the use of sibling selectors.

[xtianus79]

@willshowell and @YeomansIII

you should be able to manipulate everything without the use of sibling selectors.

Perfect!!! When will this be released? In beta.7?

[willshowell]

@xtianus79 yeah it will be in the next release. Alternatively you can use now via material2-builds. And to answer the question you made on the PR itself, it will not show up in the API until a release is made.

[xtianus79]

@willshowell cool... thank you sir

[jelbourn]

Closing this since I think it's resolved by the aforementioned PR

[angular-automatic-lock-bot[bot]]

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._}