this dialog style is not work,seems no have

[Striveyazi]

i use your demo code , but the css style is wrong, can you tell me that what are the possible causes of this error.
demo link:
https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts

error style:

expect style:
like this

i need your help

[crisbeto]

These are the proper dialog styles. We recently switched to using flexbox to center the dialog (see #1962), instead of transform, because using transforms can cause the dialog contents to become fuzzy in certain conditions (e.g. when the dialog's width or height isn't a whole number). If you're experiencing rendering issues, try clearing the node_modules/@angular folder and reinstalling, this has been a common issue after the recent alpha release.

[Striveyazi]

thank u very much. your mean is cleaning node_modules/@angular or node_modules/@angular/material and reinstalling this.
i have done both . the position still is incorrect?

[Striveyazi]

angular version: 2.3.0
material verison:2.0.0-alpha.11-3

[crisbeto]

Both should do the trick. Also clearing the node_modules should be fine. Otherwise can you post a screenshot of what the dialog looks like for you?

[Striveyazi]

[Striveyazi]

i need it in center , or i can custom this position. my css style maybe cause this problem? or not it's version problem?

[crisbeto]

It should be in the center by default. I'm trying it out locally and it works fine. It's hard to know what is going on just by looking at a screenshot, but the following CSS rules are what makes it work, in addition to the ones that are set as inline styles:

.md-overlay-container {
  position: fixed;
  z-index: 1000;
}

.md-overlay-container, .md-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.md-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

If these aren't in your stylesheet, then it's probably outdated.

[Striveyazi]

[Striveyazi]

[crisbeto]

It's not supposed to be in the element.style (those are the inline styles), but it should show up right below it. It would be a good idea to try and clear out the node modules, as well as your cache and try to reinstall Material. Something similar happened here, but was fixed with a fresh install #2136

[Striveyazi]

I suspect that because this version of the style file is not loaded properly, you think there may be what causes it?

[Striveyazi]

I'll try what you just said

[crisbeto]

Most likely, I'm not sure what your setup is, although I can also see that some of your other CSS might be missing (e.g. the dialog backdrop is supposed to be dark, but yours looks transparent).

[Striveyazi]

i'm sorry. i did as yor said. but this problem is still exist. my node_module/@angluar/material/dialog
/dialog-container.css it's content as follows:
/**

• Applies styles for users in high contrast mode. Note that this only applies
• to Microsoft browsers. Chrome can be included by checking for the html[hc]
• attribute, however Chrome handles high contrast differently.
  */
  md-dialog-container {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  display: block;
  padding: 24px;
  border-radius: 2px;
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
  height: 100%; }
  @media screen and (-ms-high-contrast: active) {
  md-dialog-container {
  outline: solid 1px; } }

/*# sourceMappingURL=dialog-container.css.map */

is this .css file's problem???

[crisbeto]

The positioning styles that I pasted should be in the overlay styles. They should be at core/overlay/overlay.css.

[Striveyazi]

oh. I read the path, but did not find.I put this directory screenshots for you。

[crisbeto]

My bad, looks like the overlay styles are in the generated theme files. Do you use the theming? You can see how to set it up in our guide: https://github.com/angular/material2/blob/master/docs/theming.md. You only need to include one of the pre-built themes.

[Striveyazi]

its my error.i didnt use this reference theme file.i will try it again.thank u very much.

[Striveyazi]

this problem is solved, thank u very much for your patience

[Cleudi]

I basically have the same problem (beta version). Will styles be moved to the component itself or will it be mandatory to use theming as described before?

[crisbeto]

Some of these styles don't have a corresponding component @Cleudi, hence why they are added to the theme. Also even if we did move the structural styles away from the theme, your app probably wouldn't look good either since all of the color-related styles are there.

[angular-automatic-lock-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.}