CODEWITHSUNDEEP
typescriptangular5angular-material2
ackuser
ackuser

Reputation: 5899

Angular 5 / Material, how to remove vertical scroll in Mat Dialog?

I am trying to remove the vertical scrolling in a Material Dialog.

I was trying with CSS

.mat-dialog-container /deep/ {
   overflow-y: hidden;
}

and also with the code in the parent component

this.dialog._overlayContainer._containerElement.style.overflowY = "hidden";

But, there was no way to do that.

Does it know anyone how I can achive that?

Thanks

Upvotes: 22

Views: 64155

Answers (12)

ibrahim ünal
ibrahim ünal

Reputation: 109

overflow-y : hidden worked for me first but after that I realized that i was not able to scroll. Then I find the class where scroll has it. Mine was mat-mdc-dialog-surface

And updated it with ng-deep and webkit-scrollbar

::ng-deep .mat-mdc-dialog-surface::-webkit-scrollbar {
  display: none !important;
}

Upvotes: 0

Juanma Font
Juanma Font

Reputation: 366

Easy:

Add your own class to component, here->"myModalComponent" (modal.component.html):

<div mat-dialog-content class="myModalContent">
    <img src="{{data.src}}" alt="{{data.alt}}">
</div>

and add css to modal.component.scss:

.myModalContent {
    overflow-y: hidden;
}

Upvotes: 2

kin
kin

Reputation: 159

you can set the css id of your component by thd id of MatDialogConfig

import { Overlay } from '@angular/cdk/overlay';
constructor(private overlay: Overlay) {}

let config: MatDialogConfig<BigImgData> = {
    scrollStrategy: this.overlay.scrollStrategies.block(),
    id: 'bigImgComp',
};
this.dialogRef = this.dialog.open(BigImgComponent, config);

then set the css of your id in src\styles.css

#bigImgComp {
  overflow: hidden; /* Hide scrollbars */
}

Upvotes: 0

Sashikant Mohanty
Sashikant Mohanty

Reputation: 1

You will have to put this within your local css file.

::ng-deep .mat-dialog-container {
  overflow: unset;}

Upvotes: 0

Ali Mumtaz
Ali Mumtaz

Reputation: 155

.mat-dialog-content {
  background-color: #eff2f5;
  display: block;
  margin: 0 -24px;
  padding: 0 24px;
  max-height: 109vh;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

Upvotes: 0

Vikram Kumar
Vikram Kumar

Reputation: 547

::ng-deep .mat-dialog-container {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

Upvotes: 1

abo
abo

Reputation: 378

I had the same issue when my html contains mat-dialog-content

<div mat-dialog-content>
    <mat-form-field>
        ....
    </mat-form-field>
</div>

Then I changed to,

<div>
    <mat-form-field>
        ....
    </mat-form-field>
</div>

And it removes the vertical scroll bar from the dialog.

Upvotes: 8

sadab khan
sadab khan

Reputation: 331

Inside your dialog component's style, you can use 

  ::ng-deep .mat-dialog-container {
    overflow-y: hidden !important;
}

Upvotes: 9

DerKarim
DerKarim

Reputation: 275

If your dialog stretches over the whole page and the scrollbar on the right does not disappear, I would suggest this option.

.cdk-global-scrollblock {
    overflow-y: hidden;
}

That worked for me.

Upvotes: 7

Hien Nguyen
Hien Nguyen

Reputation: 18973

This is my implement. In parent component of TrendDialogComponent

const dialogRef = this.trendDialog.open(TrendDialogComponent, {
                    autoFocus: false,
                    panelClass: 'trend-dialog',
                    width: '1360px', height: '680px',
                    data: {tagsTrend: this.tagNames}
                  });

and add this css to style.css

.trend-dialog .mat-dialog-container{
    overflow-y: hidden !important;
}

Upvotes: 10

Ritiwik Brahma
Ritiwik Brahma

Reputation: 181

Go to styles.scss file and then add the following:

.custom-dialog-container .mat-dialog-container {
  overflow-y: hidden;
}

and add 

panelClass: 'custom-dialog-container'

as a part of the MatDialogRef object that you are sending to the dialogComponent

Upvotes: 18

G. Tranter
G. Tranter

Reputation: 17958

In your dialog component's style:

/deep/ .mat-dialog-content {
    overflow-y: hidden !important;
}

Upvotes: 10

Related Questions