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;
}
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.
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With