Which dedicated CSS selector allows me to override the width of the mdDialog container?
For a typical Angular Material dialog that has a maximum width of 80vw set to .mat-dialog-container
, how can I formulate a selector to override it? I want a real full width dialog.
The problem is scoping - Angular-CLI compiles a CSS component with scoped attribute selectors.
Hence it is:
.parent .child
becomes:
.parent[some_attr] .child[some_other_attr]
However, this particular element is not tied to any component - there is no dynamically generated attribute on it.
I have tried overriding both the dialog stylesheet and the host stylesheet with no success.
Let me try again. I don't know much about this issue.
Let's say I add this to my component's stylesheet:
.mat-dialog-container {
max-width: 100%;
}
I have a build clock so the app is recompiled. Now the CSS output looks like this:
.mat-dialog-container[_ngcontent-c6] {
max-width: 100%;
}
However, this element does not actually have an attribute _ngcontent-c6
. This attribute applies to other elements that are within the ancestor siblings .mat-dialog-container
. The selector is wrong.
If I add this CSS to the stylesheet of the dialog component, something similar happens, but with a different attribute ID.
source to share
If you can add an id to your main body tag and want it to be in all these dialogs, you can use this
<style>
#bodyID .mat-dialog-container {
max-width:100vw;
background-color: blue;
}
</style>
It will override the current style, at least in the plunger you provided.
If you want a specific style for each dialogue, have you looked at this?
how-to-style-child-components-from-parent-components-css-file
source to share
You don't need the body id because, as you mentioned, the selector is rewritten by Angular in such a way that it completely disagrees with the element.
But yeah, it seems the only way to get around this is to just throw your hands and forget about the scope of the component styles and add your CSS rule to the page stylesheet. Of course, the caveat is that this rule needs to be added to every page that uses a component, which might be considered absurd depending on what your component is for and by whom.
source to share