Sign in


Sign up


Cascading-modal not cascading

MDB SupportCategory: MDB jQueryCascading-modal not cascading
SFF asked 1 week ago in MDB free, version:444
<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?

3 Answers
Marta Szymanska answered 1 week ago

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 replied 1 week 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 1 week 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.

Marta Szymanska answered 5 days ago

Hi,

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

Best,

Marta

SFF replied 5 days ago

Yes, problem solved