CODEWITHSUNDEEP
angularangular-materialangular-material2
Davtho1983
Davtho1983

Reputation: 3954

Get rid of white space around Angular Material modal dialog

I want to get rid of the white space in my Angular Material modal dialog. How do I style the css so I can't see any white? My css so far:

app-commission-me-dialog {
    margin: 0px;
    padding: 0px;
}

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}

Upvotes: 63

Views: 71537

Answers (7)

Bhavesh Jha
Bhavesh Jha

Reputation: 31

These are the following steps, using this you can rid of the extra padding and unnecessary rounded corner.

Step 1:

a. Add this css to your component.scss/css.

    .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 0px !important;
    padding: 0px !important;
  }

b. After that set encapsulation none in your component.ts.

    @Component({
    selector     : 'test',
    templateUrl  : './test.component.html',
    styleUrls       : [`./test.component.scss`],
    encapsulation: ViewEncapsulation.None
})

Step 2:

If you want to avoid the encapsulation than simply add this css to your component.scss/css.

 ::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 0px !important;
    padding: 0px !important;
  }

Upvotes: 0

Philip Mutua
Philip Mutua

Reputation: 6891

You can use the following code snippet

::ng-deep .mat-dialog-container{
    padding: 0px !important;
}

The ::ng-deep selector is used to apply styles to elements that are not directly affected by a component's styles. It allows you to bypass the view encapsulation that Angular provides by default.

Upvotes: 3

Franco
Franco

Reputation: 862

Simply add the follwing code to your style.css or style.scss:

.mat-dialog-container {
    padding: 0 !important;
}

This will override the mat-dialog-class's padding.

Upvotes: 1

Isaac Weingarten
Isaac Weingarten

Reputation: 1190

if u wanna remove the padding just horizontally
wrap in the dialog content in <div mat-dialog-content> element then remove the padding like this

HTML

<div mat-dialog-content class="mat-dialog-content">
    content
</div>

CSS

.mat-dialog-content {
  padding: 0;
}

(u can add margin: -24px; to the .mat-dialog-content class this will remove the padding all together)

Upvotes: 2

Mauricio Gracia Gutierrez
Mauricio Gracia Gutierrez

Reputation: 10862

Extending @Naisal answer if you want a more compact angular material dialog, here are some styles that you can use.

.custom-dialog-container .mat-dialog-container {
    padding: 15px !important;
    overflow-x: hidden;
    overflow-y: hidden;
    top:20px;
}

.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

.mat-dialog-actions {
    margin-top: -15px;
}

You can create custom styles for only certain dialogs or a global style in you style.css file

enter image description here

Upvotes: 1

FAISAL
FAISAL

Reputation: 34701

Updated Answer

From the official documentation:

Styling overlay components

Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.

You can override the default dialog container styles by adding a css class in your global styles.css. For example:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

After that, you'll need to providies you css class as a panelClass parameter to your dialog:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

Link to StackBlitz Demo. Read this official documentation for more information.

Original Answer

Use ViewEncapsulation to override default styles with your styles.

In the component which opens the dialog, do the following changes:

import {ViewEncapsulation} from '@angular/core';
    
@Component({
  .....,
  encapsulation: ViewEncapsulation.None 
})

and in that component's css file, add the following class:

.mat-dialog-container {
    padding: 0px !important;
}

Here is a link to Plunker Demo.

Upvotes: 138

Will Howell
Will Howell

Reputation: 3715

I made a comment on the chosen answer, but I'd like to clarify in a full answer. If you add dialog styles to your component and set ViewEncapsulation to None, those styles will globally affect your whole app, and any future dialogs will open without padding.

Instead opt for utilizing the dialog's panelClass property:

component.ts

this.dialog.open(MyDialogComponent, {
  panelClass: 'app-full-bleed-dialog', 
  data: ...
});

global stylesheet

.app-full-bleed-dialog .mat-dialog-container {
  padding: 0;
}

That way, you can still keep encapsulation on your dialog component styles, and you can selectively reuse your app-full-bleed-dialog class as needed.

To read more about customizing Material components, check out this guide.

Upvotes: 47

Related Questions