web-dev-qa-db-ja.com

固定ヘッダーとフッター、およびスクロール可能なコンテンツを備えたモーダルダイアログ

固定のヘッダーとフッターがあり、モーダルダイアログ内のコンテンツ（この場合はユーザーのリスト）がスクロール可能であるモーダルダイアログを作成しようとしています...

これまでの私の最善の試みは、画像に結果をもたらしました：

my best

私は画像を見た後、問題が何であるかを説明する必要はないと思います...そしてまた、あなたは解決策がどのように見えるべきかを知っていると思います... :)

しかし、とにかくそれを書くつもりです...モーダルダイアログには、固定ヘッダー（タイトル "Edit board" "Board name"と "Board type"が配置されている領域）とフッター（ 「保存」ボタンが配置されています）固定/スクロール不可にする必要があります...スクロール可能にする必要があるのは、ユーザーのリストだけです...

コード：

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;
}
}
}

だから誰かが私に私のコードで何が間違っているのか教えてもらえたら、または私が何か違うことをするべきならそれはいいでしょう...

これらの例を使用してこれをコーディングしました... 例no.1 ＆ 例no.2

注：私はマテリアライズフレームワークを使用しています

htmlcssmaterial-designmaterialize
6
weinde

次のように、calc()関数を使用してmax-heightを試すことができます。

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

以下のスニペットを見てください（フルスクリーンを使用）：

$(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>

お役に立てれば！

8
Saurav Rastogi

これで試してみてください

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

マテリアライズのバージョン1ではテストしていませんが、これは私が使用しているものです。

.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;
}

クラスを追加するだけですwith-headerをモーダルに追加し、 '。modal-content'の上にdivを追加します。

<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>

パディングの上書きにより、.modal-headerの背景を変更した場合に表示されるピクセル全体のギャップが解消されます。

1
Adam Starrh

あなたはこのように見えていますか？そうでない場合は、フィドラーでコードを更新してください私は何かしますか？

<!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>
0
Darshak