Cascading-modal not cascading

Topic: Cascading-modal not cascading

SFF free asked 6 years 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?

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

SFF free commented 6 years ago

Yes, problem solved

Add comment

SFF free answered 6 years ago

0 0 Best answer

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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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:

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

<div class="modal-content">

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

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

</div>
</div></code>

Best,

Marta

Please insert min. 20 characters.

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 free commented 6 years 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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

SFF

12Support score
2Questions 1Answers 0Snippets