Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Material Design / Materialize

Modal Dialog With Fixed Header And Footer And Scrollable Content

Post a Comment
I'm trying to create a modal dialog that has an fixed header and footer and that the content (in this case list of users) inside the modal dialog is scrollable... My best attempt s

Solution 1:

You can try max-height using calc() function, like:

.modal-content {
  height: auto !important;
  max-height: calc(100vh - 340px) !important;
}

Have a look at the snippet below (use full screen):

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });
.modal {
  overflow: hidden;
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-headerh4 {
  margin: 0;
}

.modal-content {
  height: auto !important;
  max-height: calc(100vh - 340px) !important;
}

.content-row {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.content-row:last-child {
  border-bottom: none;
}

.icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #33b5e5;
  color: #fff;
}

.name {
  padding: 010px;
}

.role {
  padding: 010px;
  flex: 1;
  text-align: right;
}
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css"rel="stylesheet"/><!-- Modal Trigger --><aclass="modal-trigger waves-effect waves-light btn"href="#modal1">Modal</a><!-- Modal Structure --><divid="modal1"class="modal modal-fixed-footer"><divclass="modal-header"><h4>Modal Header</h4></div><divclass="modal-content"><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div><divclass="content-row"><divclass="icon">1</div><divclass="name">Name</div><divclass="role">Role</div></div></div><divclass="modal-footer"><ahref="#!"class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

Hope this helps!

Solution 2:

Try this, it should work:

<divid="addBoardModal"class="modal modal-fixed-footer"><formclass="Boards_new"autocomplete="off"><divclass="modal-header"><h5>{{title}}</h5><divclass="input-field"><!--INPUT FORM--><divclass="BoadType"><!--RADIAL BUTTON THING--><divclass="modal-content"style="height:150px;overflow:scroll"><divclass="shareMembers"style="margin-top:18px;"><divclass="row"><h5class="left">Share</h5><!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!--></div></div><divclass="modal-footer"><!--JUST THIS SAVE BUTTON--></div>

Solution 3:

you are looking like this?? If not then please update your code in fiddler i will do something?

<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>Modal Example</h2><!-- Trigger the modal with a button --><buttontype="button"class="btn btn-info btn-lg"data-toggle="modal"data-target="#myModal">Open Modal</button><!-- Modal --><divclass="modal fade"id="myModal"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Modal Header</h4></div><divclass="modal-body"style="height:300px;overflow:scroll"><p>Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button></div></div></div></div></div></body></html>

Solution 4:

I haven't tested it with the version 1 of Materialize, but this is what I am using:

.modal-header {
    padding: 14px;
    text-align: center;
    position: sticky;
}
.modal.modal-fixed-footer.with-header.modal-content {
    height: calc(88% - 56px) !important;
    padding: 23px!important;
}

Simply add the class with-header to the modal and add a div above '.modal-content' like so:

<divid="modal1"class="modal modal-fixed-footer with-header"><divclass="modal-header"><h1>Modal Header</h1></div><divclass="modal-content"><p>Scrollable content</p></div><divclass="modal-footer"style="text-align: center"><ahref="#!"class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a></div></div>

The padding overwrite eliminates a pixel-wide gap that appears if you change the background of .modal-header.

Solution 5: 

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

this works for me

thanks

Post a Comment for "Modal Dialog With Fixed Header And Footer And Scrollable Content"