Topic: Scroll Modal Full Height Right
Expected behavior*Modal should scroll vertically when there are more content to display*Actual behavior*Modal does not scroll vertically when there are lots of content*Resources (screenshots, code snippets etc.)
<div class="modal-dialog modal-dialog-scrollable modal-lg modal-full-height modal-right" role="document">
Arkadiusz Idzikowski staff answered 6 years ago
We will take a closer look at this problem. For now please try to add 'overflow-y: scroll" to the div with mdbModal directive and remove modal-dialog-scrollable class.
<div style="overflow-y: scroll" mdbModal #basicModal="mdbModal" class="modal fade bottom" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg modal-full-height modal-right" 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>Save!</button>
</div>
</div>
</div>
</div>
itdev pro answered 6 years ago
Your solution did not work for my use case. Can you provide a workaround for the following case:
<div class="modal-dialog modal-lg modal-full-height modal-right" role="document">
Damian Gemza staff answered 6 years ago
Dear @itdev
Could you please check one more time, if the below code works for you fine?
Also please specify on which browser your problem exists - on every browser? Or some specific?
Did you tried to update your app to the latest MDB Angular? Currently 7.5.2
<div style="overflow-y: scroll" mdbModal #basicModal="mdbModal" class="modal fade bottom" tabindex="-1" role="dialog"
aria-labelledby="myBasicModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg modal-full-height modal-right" 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">
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
<p class="my-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
voluptas.
</p>
</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>Save!</button>
</div>
</div>
</div>
</div>
<button mdbBtn color="primary" (click)="basicModal.show()">Show modal</button>
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No