<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?