Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MdDialog not resizing height to contents on open

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

trying to create an MdDialog using the Material 2 library. Expect the dialog to automatically size to the contents of the dialog.

What is the current behavior?

It’s all working perfectly except for the height which comes out at 100% of the browser window height.

What are the steps to reproduce?

If I set the height using a MdDialogConfig object then the height works properly. However this is not much good as if the form layout changes, the height will not adjust automatically thus running the risk of form elements being cut off.

export class MainHeader implements OnInit {
    constructor(private dialog: MdDialog,
                private viewContainerRef: ViewContainerRef) {

    }

    ngOnInit() {
        this.config = new MdDialogConfig();
        this.config.viewContainerRef = this.viewContainerRef;
    }

    openLoginModal() {
        this.dialogRef = this.dialog.open(LoginModal, this.config);

        this.dialogRef.afterClosed().subscribe((result: string) => {
            // do something 
            this.dialogRef = null;
        });
    }

}

If I don’t pass in the config, same result.

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

Using forms inside dialog.

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

Angular 4.0.0-beta.1 Material 2.0.0-alpha.11.3

Is there anything else we should know?

I thought this might be a stylesheet problem so I commented out the styles and the problem persisted.

To double check, I added a border to a <div> which surrounds the form. The form is the correct size as expected.

Issue Analytics

State:
Created 7 years ago
Comments:50 (18 by maintainers)

Top GitHub Comments

7reactions

m0ttercommented, Jan 22, 2017

I think I found the problem. I was missing <!DOCTYPE html> from index.html

I can now remove the css hack and it works as intended. Can someone please test it.

1reaction

TalosProgrammingcommented, Nov 22, 2017

Ok sorry if this sounds silly, but I just lost 20 mins on this problem, so I write this just so no one ever feels that dumb ever again :

Try closing the console, it affects the dialog ^^

Top Results From Across the Web

Set mdDialog to not resize to fit content after opening

This will fix the width, when your dialog is rendered. You can remove the class by setting the property back to false whenever...

Angular Material Dialog Resize - StackBlitz

export class AppComponent {. constructor(private dialog:MatDialog){. } openDialog(){. this.dialog.open(HelloComponent,. {height:'100px',width:'100px'});. }.

Services > $mdDialog - Angular Material

When using a template as content element, it will be not compiled upon open. This allows you to compile the element yourself and...

How To Increase Automatic Height Of Matdialogbox In Angular 5

What I am expecting is for the modal to open at a similar height as the total ... height: 250px } Content in...

How to Prevent closing of modal Dialog in Angular Dialog ...

Otherwise, it will not be closed. ... index.html ... style="position: absolute;" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button> <div ...