title: Is there any way to make dialog's header and footer sticky in angular material
body: <p>When I scroll the content of <a href="https://www.freakyjolly.com/angular-material-modal-popup-example/#.Xy04eygzbIX" rel="nofollow noreferrer">Dialog</a>, right top <code>close</code> and right bottom <code>Ok</code> button also getting scrolled.</p>
  <p>I want to make those <code>button</code> fixed, not to scrolled so that any time I can <code>close</code> the dialog.</p>
  <p>This my code</p>
  <pre><code>&lt;div md-dialog-content&gt;
       &lt;button class=&quot;close&quot; mat-button (click)=&quot;onNoClick()&quot;&gt;
          &lt;mat-icon&gt;close&lt;/mat-icon&gt;
       &lt;/button&gt;
  
  //here my table content
      
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
      &lt;button id=&quot;matbuttonClosedownSide&quot; color=&quot;primary&quot; mat-button [mat-dialog-close]=&quot;null&quot;&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>code to open model</p>
  <pre><code>const dialogRef = this.dialog.open(myModalComponent, {
  width: '80%',
  height:'80%',
  panelClass: 'my-dialog',
  disableClose: true ,
  data:this.data[index]
  });
  </code></pre>