如何在我的Angular对话框中添加滚动条? [英] How to add scrollbar to my dialog in Angular?

问题描述

我正在使用以下功能打开一个对话框:

I am opening a dialog window using the following function:

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

  }

我的NgxChartsComponent的HTML代码是:

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>

我使用MatDialog和MatDialogRef创建对话框，它运行良好，但是我必须缩小屏幕才能看到对话框的全部内容，并且没有滚动功能！请帮助我知道如何将滚动条添加到弹出对话框窗口?

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?

推荐答案

我认为您只需要在对话框的CSS中添加一个简单的overflow: scroll;

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

这篇关于如何在我的Angular对话框中添加滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！