CODEWITHSUNDEEP
javascriptjqueryhtmlmaterialize
Varun Sharma
Varun Sharma

Reputation: 4842

Full screen modal in materialize design

I am using Materialize design. And i am implementing full screen modal. Width is spend in full screen but height is not set in full screen. I have seen one link then i want to implement like this. If any plugin and any other solution, Then let me know. http://joaopereirawd.github.io/animatedModal.js/ 

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>


<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal" style="width:100%;height:100%">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
   
  </div>

I don't want to same as link(animation). But i want to implement opened modal cover full screen.

Upvotes: 1

Views: 9462

Answers (1)

Tirth Patel
Tirth Patel

Reputation: 5736

In materialize.css file, I looked into .modal selector and it has a property called max-height: 70%; that's why your inline style height: 100% was not working. You can override the default max-height.

CSS

.modal {
   max-height: 100%;
}

PICTURE

enter image description here

DEMO

jsFiddle

Upvotes: 2

Related Questions