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.