CODEWITHSUNDEEP
angularangular-materialdialogscrollviewscrollbar
Hasani
Hasani

Reputation: 3929

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?

Upvotes: 0

Views: 3707

Answers (2)

Marcio Oliveira
Marcio Oliveira

Reputation: 21

You should use MatDialogContent to define your scrollable content. Like that:

<mat-dialog-content>
   <!-- put your lage content here -->
</mat-dialog-content>

You can see the first example here https://material.angular.io/components/dialog/examples

Upvotes: 1

Raul Cabrejas
Raul Cabrejas

Reputation: 23

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

Upvotes: 0

Related Questions