New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Snackbar and dialog taking full screen in production #14376

kartik2206 opened this Issue Dec 3, 2018 · 2 comments


None yet
1 participant

kartik2206 commented Dec 3, 2018

Bug, feature request, or proposal:

I use MatDialog and MatSnackBar at various points in my web app to notify/ warn user about something. When I use these in debug mode using ng serve the size and position of snackbar is correct like snackbar is at the bottom of the page with height approximately 50-60px and dialog is at center of page with height enough to wrap the content. Now the problem what is occuring is when I am using ng build --prod --build-optimizer and uploading files to firebase hosting these same dialogs and snackbars are taking full height and full width.

What is the expected behavior?

The dialogs and snackbars should show normal behaviour in production mode

What is the current behavior?

Dialogs and snackbars cover whole screen in production mode

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

Nice UI for the user

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

  "@angular/animations": "^7.0.1",
    "@angular/cdk": "^7.0.2",
    "@angular/common": "^7.0.1",
    "@angular/compiler": "^7.0.1",
    "@angular/core": "^7.0.1",
    "@angular/fire": "^5.1.0",
    "@angular/forms": "^7.0.1",
    "@angular/http": "^7.0.1",
    "@angular/material": "^7.0.2",

Is there anything else we should know?

Images in production
2018-12-04 1

Images in debug mode
2018-12-04 3
2018-12-04 2


This comment has been minimized.

kartik2206 commented Dec 4, 2018

I digged into the inspect section and found that the align-items:center is not working for outer most div in below code in production but is working in debug mode. I got to know this by opening debug and production dialog side by side in different tabs and then for the outermost div I was toggling the align-items:center property in chrome tools and what I saw was in debug mode on unmarking align-items:center the look was same for debug and production but when I was marking or unmarking align-items:center in div for production code. There was no change in look for dialog. So from here I concluded align-items:center is not working in production mode for outermost div of below code. What should I do to solve this problem?

<div class="cdk-global-overlay-wrapper" dir="ltr" style="justify-content: center;align-items: center;">
    <div id="cdk-overlay-8" class="cdk-overlay-pane" style="max-width: 80vw; pointer-events: auto; position: static;">
        <div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
        <mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c26-133 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-1" role="dialog" aria-labelledby="mat-dialog-title-1" style="transform: none;">
            <app-dialog _nghost-c33="" class="ng-star-inserted">
                <h1 _ngcontent-c33="" class="mat-dialog-title" mat-dialog-title="" id="mat-dialog-title-1">Are you sure ?</h1>
                <div _ngcontent-c33="" class="mat-dialog-content" mat-dialog-content=""> This action can't be rolled back. Are you sure you want to delete the campaign(s) ?
                <mat-dialog-actions _ngcontent-c33="" align="end" class="mat-dialog-actions">
                    <button _ngcontent-c33="" mat-button="" mat-dialog-close="" type="button" class="mat-button" aria-label="Close dialog"><span class="mat-button-wrapper">No</span>
                        <div class="mat-button-ripple mat-ripple" matripple=""></div>
                        <div class="mat-button-focus-overlay"></div>
                    <button _ngcontent-c33="" cdkfocusinitial="" mat-button="" type="button" class="mat-button" aria-label="Close dialog"><span class="mat-button-wrapper">Yes</span>
                        <div class="mat-button-ripple mat-ripple" matripple=""></div>
                        <div class="mat-button-focus-overlay"></div>
        <div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>

This comment has been minimized.

kartik2206 commented Dec 4, 2018

I was able to find the problem. The problem was in my index.html. I hadn't closed the <head> tag. I made the change and everything was fine. Also I found while searching for this problem was that no <!DOCTYPE html> at the top of index.html can also cause this problem.

@kartik2206 kartik2206 closed this Dec 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment