How to add scrollbar to my dialog in Angular?

问题

I am opening a dialog window using the following function:

  doOutput(){
    this.dialog.open(NgxChartsComponent ) ; 

  }

And the HTML code of my NgxChartsComponent is:

<!-- The chart type goes in here -->

<div> This is a visual representation of a line chart</div>
<div style="display: inline-block">
    <ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      [timeline]="timeline"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>
  </div>

    <br>
    <div> This is a visual representation of a area chart</div>

    <div style="display: inline-block">
    <ngx-charts-area-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
    </ngx-charts-area-chart>
    </div>


    <br>
    <div> This is a visual representation of a pie chart</div>

    <div style="display: inline-block">
    <ngx-charts-pie-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="single"
    [legend]="showLegend"
    [explodeSlices]="explodeSlices"
    [labels]="showLabels"
    [doughnut]="doughnut"
    [gradient]="gradient"
    (select)="onSelect($event)">
  </ngx-charts-pie-chart>
</div>

I use MatDialog and MatDialogRef to create my dialog and it works well but I must zoom out the screen to see the full content of the dialog and there is no scroll facility for that! Please help me know how can I add scroll to my popup dialog window?

回答1:

I think what you just need is a simple overflow: scroll; in you dialog's css

来源：https://stackoverflow.com/questions/59790584/how-to-add-scrollbar-to-my-dialog-in-angular