Topic: Problem Modal on mobile (modal width)

pro asked 5 years ago

In any mobile, the width exceeds the size of the screen ... how to solve this? link > code: <div class="modal right fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-notify modal-info modal-side modal-bottom-right" role="document"> <!--Content--> <div class="modal-content"> <!--Header--> <div class="modal-header"> <p class="heading lead">Ops, esqueceu a senha? </p> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="white-text">×</span> </button> </div> <!--Body--> <div class="modal-body"> <div class="container"> <div class="text-left"> <div class="text-center"> <i class="fa fa-lock fa-4x mb-1 animated rotateIn"></i> <i class="fa fa-question fa-4x mb-1 animated rotateIn"></i> </div> <p>Preencha abaixo com seu e-mail para receber uma nova senha por e-mail:</p> </div> </div><br /> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="email" id="usr_email2" class="form-control validate"> <label for="form2" data-error="Ops, esse E-mail não parece ser válido..." data-success="">Seu E-mail</label> </div> </div> <!--Footer--> <div class="modal-footer justify-content-center"> Recuperar <i class="fa fa-send ml-1"></i> Fechar </div> </div> <!--/.Content--> </div> </div>

jkilbride free answered 5 years ago

@xardonik Thanks for the fix! It works. For anyone else who has this problem, I've found that 95% is better for the smallest screens.

xardonik free answered 5 years ago

Hi, before MDB resolve that, you can add this to your css file: .modal .modal-side {max-width:100%;}

Marta Wierzbicka staff answered 5 years ago

Hi, I see this problem in your link you pasted here. But could you send me this html file to, please? I will check this issue. Best, Marta

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

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes