Topic: Scroll long content on a Dynamic modal

Liz Cross free asked 5 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

Damian Gemza staff answered 5 years ago

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:

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

    private modalService: MDBModalService,
    private renderer: Renderer2) {

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

Best Regards,


Liz Cross free commented 5 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 5 years ago


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

modalOptions = { scroll: true };, this.modalOptions);

Liz Cross free commented 5 years ago

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

Samantha priority commented 4 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 4 years ago

We will update the documentation.

sKuD free commented 3 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 3 years ago

We added this information to the API section:

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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