Search code examples
htmlcssbootstrap-modalmaterializemodalviewcontroller

Using Materialize Cards Conflict with Modal View

I am trying to use Materialize Cards along with a separate button next to it to show a modal view. Everything seems to works fine, but when I click the modal, the modal content doesn't show in the prescribed values in the CSS, such as the height of the modal view and the associated darkened backdrop shade when the modal view is activated(it stop half way on the page). When I disable <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> it works but then the Materialize content fails. Is there a way to make everything work both the Materialize content and the modal view height and darkened background shade?

HTML:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
      <button id="myBtn">Open Modal</button>
</span>
  <div id="myModal" class="modal">
                <div class="modal-content">
                  <span class="close">&times;</span>
                    <form id="msform">
                      <fieldset>
                        <h2 class="fs-title">Create Discount</h2>
                        <h3 class="fs-subtitle">Step 1</h3>
                        <input type="button" name="next" class="next action-button" value="Next" />
                      </fieldset>
                    </form>
                </div>
              </div>

CSS:

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 1000%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  /* background-color: #fefefe; */
  background: linear-gradient(-45deg, #89f7fe 0%, #66a6ff 60%, #23A6D5, #23D5AB);
  margin:auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
  height: 500px

}
Solution

  • I was able to figure it out-I just had to make the height to "max-height" in .modal; having just height caused the problem but having just "height" worked before the importation of <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">