Scroll long content on a Dynamic modal

Topic: Scroll long content on a Dynamic modal

Liz Cross asked 6 years ago

Hi, I can see how to add the scroll-y option on a basic modal but how do I add it to a Dynamic created modal, is there an option?

the docs say "When modal become too long for the user’s viewport or device, it should scroll of the page itself. To do this, add style="overflow-y: auto" to div with mdbModal directive."

but how do I access the mdbModal directive when I create a Dynamic modal

Thanks, Liz

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Liz Cross,

You should add overflow-y: auto style to the mdb-modal-container element with the Angular's Renderer2 class.

Please check the below code:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  modalRef: MDBModalRef;

  constructor(
    private modalService: MDBModalService,
    private renderer: Renderer2) {
  }

  openModal() {
    this.modalRef = this.modalService.show(ModalComponent)
    this.renderer.setStyle(document.querySelector('mdb-modal-container'), 'overflow-y', 'auto');
  }
}

Best Regards,

Damian

Liz Cross commented 6 years ago

Thanks, this works but I will have to add this to all my dynamic modals to cover any one making the browser page smaller than the current modal, I think this style option should be a default or made easier to implement through a simple additional option.

Thank you, for your help.

Arkadiusz Idzikowski staff commented 6 years ago

Hello,

Please try to add 'scroll: true' parameter to your modal options. For example:

modalOptions = { scroll: true };

this.modalService.show(ModalComponent, this.modalOptions);

Liz Cross commented 6 years ago

Yes that works, much easier option, I didn't see this option in the angular modal docs, thanks.

Samantha pro premium priority commented 5 years ago

Could you please add this information to the documentation? I had to google it to find it! Thank you.

Arkadiusz Idzikowski staff commented 5 years ago

We will update the documentation.

sKuD commented 4 years ago

Please update your doc... I have a pro account and I spend so much time to search any solution.

Arkadiusz Idzikowski staff commented 4 years ago

We added this information to the API section: https://mdbootstrap.com/docs/angular/modals/basic/#a-dynamic-modal-options

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.4.1
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Liz Cross

85Support score
7Questions 5Answers

0Snippets likes 0Snippets