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 best attempt so far gave me the result on the image:

I assume that after seeing the image I dont have to describe what the problem is... and I also assume that you will know what the solution has to look like... :)

But just to be sure I'll write it anyway... The modal dialog needs to have a fixed header (Area where the title "Edit board" "Board name" and "Board type" are located) and footer (Area where the "SAVE" button is located) haveto be fixed/unscrolable... the only thing that has to be scrollable is the list of users...

CODE:

Html:

<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">
            <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">
        <!--JSUT THIS SAVE BUTTON-->
      </div>

CSS:

.modal {
  @extend .z-depth-4;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  //overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity;

     @media #{$medium-and-down} {
       width: 80%; }

  h1,h2,h3,h4 {
    margin-top: 0; }

.modal-header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  width: 100%; 
  height: 15rem; 
  padding:24px;
}

.modal-header > .input-field{width:100%;}

.modal-content {
  padding: 24px;
  position: absolute; 
  width: 100%; 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
}

.modal-close {cursor: pointer;}

.modal-footer {
  border-radius: 0 0 2px 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fafafa;
  padding: 4px 6px;
  height: 56px;
  width: 100%;

.btn, .btn-flat {
  float: right;
  margin: 6px 0;
}
}
}

So if anyone could please tell me what am I doing wrong in my code or if I should be doing something diferently that would be nice...

I used these examples to code this...Example no.1 & Example no.2

NOTE: I'm using the Materialize framework

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.

View more solutions

Comments

[weinde]

no... i thought that this fiddle you provided was the description of my problem... its still not resolved

[Darshak]

fix your Modal-content div height like this :- <div class="modal-content" style="height:300px;overflow:scroll">

[weinde]

Thank you :) this works, but now I have a huge white space between the content and the footer xD

[Darshak]

then reduces your height according your requirement?

[weinde]

ok reduced the height and it looks alright now, but the next problem is after resizing the window to a small screen the problem is not fixed...

[weinde]

This dosent work... the header and footer are scrolable and the foother overlapses the members...

[Darshak]

thn you need to more look for bootstrap and media query in css

[Saurav Rastogi]

@weinde The header & footer are not scrollable. Also the members are not overlapping the footer. Please check again using full screen mode.

[weinde]

I did that and got the result that i wrote... maybe there is something wrong with my browser?

[Saurav Rastogi]

@weinde Can you send me the screenshot of my code running in full screen on your browser?

[weinde]

how can i do that?

[Saurav Rastogi]

@weinde Click on Run code snippet button and choose Full page on the right of the panel. The snippet will go full screen. Then take a screenshot using PrntScrn (on windows) & cmd+shift+3 (on mac). Upload the image on imgur.com or like website & send to me the link of that image in the comment.

[weinde]

hahaha nice coment man xD I just needed to know where to post the image tho :D here u go bro imgur.com/a/KKTHA

[Saurav Rastogi]

@weinde This is how it looks on mine - imgur.com/r9T5t39 . Can you try some other browser or tell me the version of chrome you are using?

[weinde]

It looks like this on Chrome Version 54.0.2840.59 (64-bit) and Firefox 49.0

[Saurav Rastogi]

Mine is running Chrome Version 55.0.2883.95 (64-bit) & Firefox 50.1.0 Have you tried running the same in firefox?

[weinde]

I tried running your snippet in my version of chrome and firefox and get the same result as the screenshot...

[Saurav Rastogi]

Let us continue this discussion in chat.

[weinde]

I am accepting this anwser, but the css values were changed to .modal-content { position: absolute; height: calc(100% - 256px); max-height: 100%; width: 100%; overflow-y: auto; }

[Hiren Gohel]

Thanks @SauravRastogi : height: auto !important; max-height: calc(100vh - 340px) !important; CSS is worked for me! You saved my time! :)