What scoped CSS selector allows me to override the mdDialog container width?

Question

Given a typical Angular Material dialog, which has a max-width of 80vw set on .mat-dialog-container, how can I formulate a selector to override it? I'd like a true full-width dialog.

The problem is scoping--Angular-CLI compiles component CSS with scope attribute selectors.

Therefore, this:

.parent .child

becomes:

.parent[some_attr] .child[some_other_attr]

However, this particular element doesn't seem attached to any component--it doesn't have a dynamically-generated attribute on it.

I've attempted overrides in both the dialog stylesheet and the host component's stylesheet with no success.

Angular special selectors

Dialog Plunkr

Let me try again. I'm not doing a good job of explaining the issue.

Let's say I add this to my host component stylesheet:

.mat-dialog-container {
    max-width: 100%;
}

I have a build watch running, so the app is recompiled. The CSS output is now this:

.mat-dialog-container[_ngcontent-c6] {
    max-width: 100%;
}

However, that element doesn't actually have the attribute _ngcontent-c6 on it. That attribute is applied to other elements which are inside siblings of ancestors of .mat-dialog-container. The selector is just wrong.

If I add that CSS to the dialog component's stylesheet, something similar happens, but with a different attribute ID.

The way to prevent those attributes from being added to elements is by disabling view encapsulation, but it seems you can only do so on a per-component basis, not per-element or per-ruleset. — BoltClock, Jul 12 '17 at 04:05

score 0 · Answer 1 · answered Jul 11 '17 at 22:05

If you can add an id to your main body tag and you want it to be on all of 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 plunker you supplied.

If you need specific style for each dialog, did you look into this?

how-to-style-child-components-from-parent-components-css-file

score 0 · Answer 2 · answered Jul 12 '17 at 04:47

You don't need a body id, because as you've mentioned the selector is rewritten by Angular such that it stops matching the element altogether.

But yeah it seems the only way around this is to just throw your hands up and forget about component stylesheet scoping and add your CSS rule to the page stylesheet. The caveat, of course, is that this rule needs to be added to every page that uses the component, which can be seen as absurd depending on what your component is intended to be used for and by whom.

What scoped CSS selector allows me to override the mdDialog container width?

2 Answers2