How to use scrollStrategy in MatDialog?

前端 未结 6 1210
独厮守ぢ
独厮守ぢ 2021-02-05 02:34

I tried to make a scroll for a dialog in reposition strategy, but it doesn\'t work for me.

const scrollStrategy = this.overlay.scrollStrategies.reposition();
con         


        
相关标签:
6条回答
  • 2021-02-05 02:41

    Since https://github.com/angular/material2/pull/11235, .mat-dialog-container got max-height: inherit which should solve your problem.

    Setting maxHeight: window.innerHeight + 'px' on the dialog configuration prevents the dialog from growing bigger than the screen.

    0 讨论(0)
  • 2021-02-05 02:53

    compare all the files difference. there is extra css in style.css

    .cdk-global-overlay-wrapper {
      pointer-events: auto;
      display: block;
      position: relative;
      overflow: auto;
      text-align: center;
    }
    
    .cdk-global-overlay-wrapper::before {
      content: '';
      display: inline-block;
      height: 100%;
      white-space: nowrap;
    }
    
    .cdk-overlay-pane {
      display: inline-block;
      position: relative;
      text-align: left;
      white-space: normal;
    }

    0 讨论(0)
  • 2021-02-05 02:54

    If you want to scroll the content of the dialog then you have to use the <mat-dialog-content> tag, or use the directive mat-dialog-content in your div element. In your example try the following instead:

    <h1 mat-dialog-title>Hi {{data.name}}</h1>
    <mat-dialog-content> <!-- instead of your <div>  or use <div mat-dialog-content> -->
      <p>What's your favorite animal!!!!!!!</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal?</p>
      <p>What's your favorite animal!!!!!!</p>
      <mat-form-field>
        <input matInput [(ngModel)]="data.animal">
      </mat-form-field>
    </mat-dialog-content> <!-- instead of your </div> -->
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()">No Thanks</button>
      <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
    </div>
    

    And now your dialog content should have a scroll on the side. Read more about the Scrollable content container of a dialog on:

    https://material.angular.io/components/dialog/api#MatDialogContent

    0 讨论(0)
  • 2021-02-05 02:55

    Hi try to put this on your style.css or style.scss

    .cdk-global-overlay-wrapper {
      display: flex;
      position: absolute;
      z-index: 1000;
      overflow: auto;
      pointer-events: auto;  
    }
    
    0 讨论(0)
  • 2021-02-05 02:56

    I tried this way,

    const dialogRef = this.dialog.open(LoginModalComponent, {
          autoFocus: false,
          maxHeight: '90vh' //you can adjust the value as per your view
    });
    
    0 讨论(0)
  • 2021-02-05 02:59

    I was looking for a similar solution as OP. The trick in the provided example is to set overflow:auto on the .cdk-global-overlay-wrapper.

    Add this css to your styles (not inside the dialog's css):

    .cdk-global-overlay-wrapper {
      overflow: auto;
    }
    

    If you want to prevent scrolling on the back scenery i.e. parent component you could set overflow: hidden on the parent as long as the dialog is open.

    .. just remove the scroll strategy from the example.

    0 讨论(0)
提交回复
热议问题