Modal dialog with fixed header and footer and scrollable content

Question

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 be

Answer 1

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:

    

      
Modal Header
    

    

      
Scrollable content
    

    


      Agree
    

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