Modal Layout Responsive in Angular Material

走远了吗. 提交于 2020-05-24 05:50:31

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!