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


Damian Gemza staff answered 6 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:

@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

Hi

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


Please insert min. 20 characters.

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
Tags