Cascading-modal not cascading

SFF asked 9 months ago

<div tabindex="-1" class="modal fade" id="modalContactForm" role="dialog" aria-labelledby="myModalLabel" style="padding-right: 12px; display: none;">
  <div class="modal-dialog cascading-modal" role="document">

    <!--Content--> 
    <div class="modal-content">

      <!--Header-->

      <div class="modal-header light-blue darken-3 white-text">
        <h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4>
        <button class="close waves-effect waves-light" aria-label="Close" type="button" data-dismiss="modal">
          <span aria-hidden="true">×</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body mb-0">
        <div class="md-form form-sm">
          <i class="fa fa-envelope prefix"></i>
          <input class="form-control" id="form19" type="text">
          <label for="form19">Your name</label>
        </div>
  
        <div class="md-form form-sm">
          <i class="fa fa-lock prefix"></i>
          <input class="form-control" id="form20" type="password">
          <label for="form20">Your email</label>
        </div>

        <div class="md-form form-sm">
          <i class="fa fa-tag prefix"></i>
          <input class="form-control" id="form21" type="text">
          <label for="form21">Subject</label>
        </div>

        <div class="md-form form-sm">
          <i class="fa fa-pencil prefix"></i>
          <textarea class="md-textarea mb-0" id="form8" type="text"></textarea>
          <label for="form8">Your message</label>
        </div>

        <div class="text-center mt-1-half">
          <button class="btn btn-info mb-2 waves-effect waves-light">Send
            <i class="fa fa-send ml-1"></i>
          </button>
        </div>

      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

The above code is copied and pasted directly from the contact form example on mdbootstrap.com/javascript/modals/ but when I have it on my site, the cascading header doesn't actually cascade. The header remains entirely within the body of the panel.

The margin-top for the header is set to -2rem and comes from the .modal-dialog.cascading-modal .modal-header rule in mdb.min.css. When I change this value in developer tools it has the effect of moving the entire modal instead of just the header.I'm sure its an easy fix, something I've overlooked. Has anyone come up against this and can give me any pointers?


Hi,

I've checked your code in the newest MDB Free 4.4.4 and it works fine and I can't reproduce your problem. Try this code:

<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4 waves-effect waves-light" data-toggle="modal" data-target="#modalContactForm">Launch Modal Subscription Form
<i class="fa fa-eye ml-1"></i>
</a>
</div>
<div tabindex="-1" class="modal fade" id="modalContactForm" role="dialog" aria-labelledby="myModalLabel" style="padding-right: 12px; display: none;">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4>
<button class="close waves-effect waves-light" aria-label="Close" type="button" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input class="form-control" id="form19" type="text">
<label for="form19">Your name</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input class="form-control" id="form20" type="password">
<label for="form20">Your email</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-tag prefix"></i>
<input class="form-control" id="form21" type="text">
<label for="form21">Subject</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-pencil prefix"></i>
<textarea class="md-textarea mb-0" id="form8" type="text"></textarea>
<label for="form8">Your message</label>
</div>
<div class="text-center mt-1-half">
<button class="btn btn-info mb-2 waves-effect waves-light">Send
<i class="fa fa-send ml-1"></i>
</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>

Best,

Marta


SFF commented 9 months ago

Thanks for your response Marta. I was thinking it was maybe my CSS resets or something that has caused this to happen because I couldn't Google anybody who's had a similar problem. However, I managed to solve the problem in my case too and I've posted an answer.


SFF answered 9 months ago

I wasn't able to Google anybody with a similar problem so its probably just the set up of my site that's caused this. Anyway, in case anyone else does have a similar problem in the future, I managed to solve it by making my own rule for .modal-dialog.cascading-modal .modal-header that changes the position to position: relative; and uses top: -2rem; instead of margin-top: -2rem; to control its positioning.


Hi,

thank you for your advice for the others, so the problem is solved, yes?

Best,

Marta


SFF commented 9 months ago

Yes, problem solved


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No