Topic: modal Fluid Right
Aroquiassamy LA ROZE priority asked 5 years ago
Hi @Damian
Actually I'm using Modal Fluid Right
Expected behavior
On your page when it comes to Tab and below devices the modal goes to center
Actual behavior
But for me It stays in right and some content goes hidden
Resources (screenshots, code snippets etc.)
<div mdbModal #abc="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
<div class="modal-content">
<div class="modal-header ">
<p class="heading lead">ABCCC
</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="abc.hide()">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nesciunt officia ipsa quo officiis odit
dignissimos ipsam, error consequatur nostrum corrupti eaque voluptates hic vel dolor nemo autem aliquam
repellat!
</div>
<div class="modal-footer justify-content-center">
<a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Send
<i class="fas fa-paper-plane ml-1"></i>
</a>
<a type="button" mdbBtn color="primary" outline="true" class="waves-effect" data-dismiss="modal" mdbWavesEffect
(click)="abc.hide()">Cancel</a>
</div>
</div>
</div>
</div>
Tell me what I did wrong..?
Damian Gemza staff answered 5 years ago
Dear La Roze,
Please try to add the below styles to your styles.scss
file, and check, if the problem with cutting the modal on smaller devices is gone.
.modal .modal-full-height {
width: unset;
max-width: 400px;
}
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.4.3
- Device: Lenova
- Browser: Chrome 73
- OS: Windows 10
- Provided sample code: No
- Provided link: No