Modal dialog with fixed header and footer and scrollable content

后端 未结 5 1101
长情又很酷
长情又很酷 2021-02-14 16:57

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

5条回答
  •  心在旅途
    2021-02-14 17:06

    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 #ffffd;
    }
    
    .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;
    }
    
    
      
      Modal
    
      
      
    
    
    

    Hope this helps!

提交回复
热议问题