问题
I have a problem on the responsiveness of using modals in Angular Material. How can i make it look good on small screens. It doesn't have to be mat-grid
Pls see this stackblitz link
Click Here
openDialog() {
const dialogRef = this.dialog.open(ModalComponent, {
width: "650px",
height: "380px"
});
}
回答1:
DemoYou can use media query in style.css
@media only screen and (max-width: 700px) {
.modal .mat-grid-tile {
width:100% !important;
position:relative!important;
left:0 !important;
}
.modal .mat-form-field {
width: 100%
}
.modal .mat-radio-button {
padding: 10px;
}
.modal .mat-raised-button.mat-warn {
margin:5px
}
}
回答2:
If you want to use responsive layout, dont use mat-grid-list
回答3:
Please try if this is what you want:
openDialog() {
const dialogRef = this.dialog.open(ModalComponent, {
width: "100vw",
height: "100vh",
maxWidth: "650px",
maxHeight: "900px"
});
For small devices you get the dialog 'as a page' with no border. For bigger devices the size is limited to a given value.
来源:https://stackoverflow.com/questions/61959287/modal-layout-responsive-in-angular-material