Modal Dialog With Fixed Header And Footer And Scrollable Content

February 25, 2023 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-header h4 {
  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: 0 10px;
}

.role {
  padding: 0 10px;
  flex: 1;
  text-align: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/>

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

  <!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-header">
      <h4>Modal Header</h4>
    </div>
    <div class="modal-content">
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
      <div class="content-row">
        <div class="icon">1</div>
        <div class="name">Name</div>
        <div class="role">Role</div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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:

<div id="addBoardModal" class="modal modal-fixed-footer">
    <form class="Boards_new" autocomplete="off">
      <div class="modal-header">
        <h5>{{title}}</h5>
        <div class="input-field">
           <!--INPUT FORM-->
        <div class="BoadType">
           <!--RADIAL BUTTON THING--> 
        <div class="modal-content" style="height:150px;overflow:scroll"> 
            <div class="shareMembers" style="margin-top:18px;">
                <div class="row">
                    <h5 class="left">Share</h5>
                      <!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
                </div>
            </div>
      <div class="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>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="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>
        <div class="modal-footer">
          <button type="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:

<div id="modal1" class="modal modal-fixed-footer with-header">

    <div class="modal-header">
      <h1>Modal Header</h1>
    </div>

    <div class="modal-content">
      <p>Scrollable content</p>
    </div>

    <div class="modal-footer" style="text-align: center">

      <a href="#!" 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

Html5 stackoverflow Examples