Topic: Vertically Centered Modal
                  
                  Aroquiassamy LA ROZE
                  free
                  asked 6 years ago
                
Hi @Damian,
Currently I'm using vertically Centered Modal here I'm Facing issue when I'm using a Modal within another Modal. For.eg:I'm opening a modal on clicking save button I'm opening another container as Modal which is vertically centered...where the scrollbar-y is placed in center of the screen Kindly guide me...
Here the vertically Centered Modal
                      
                      Damian Gemza
                      staff
                        answered 6 years ago
                    
Dear La Roze,
Could you please provide me with the code which is not working to you?
I have tried to reproduce it with the following code, but for me there's no strange scrollbar in the middle of the screen / modal.
.html:
  <button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
   <div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
             <span aria-hidden="true">×</span>
           </button>
           <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
           ...
         </div>
         <div class="modal-footer">
           <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
           <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect (click)="secondModal.show()">Save!</button>
         </div>
       </div>
     </div>
   </div>
   <div mdbModal #secondModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close pull-right" aria-label="Close" (click)="secondModal.hide()">
             <span aria-hidden="true">×</span>
           </button>
           <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
           ...
         </div>
         <div class="modal-footer">
           <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="secondModal.hide()" mdbWavesEffect>Close</button>
           <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
         </div>
       </div>
     </div>
   </div>
Best Regards, Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 7.0.0
 - Device: Desktop-Lenova
 - Browser: Chrome
 - OS: Windows 10
 - Provided sample code: No
 - Provided link: Yes