Cuadro de diálogo Modal con fija de encabezado y pie de página y contenido desplazable

Estoy tratando de crear un cuadro de diálogo modal que tiene un fijo de encabezado y pie de página y el contenido (en este caso la lista de usuarios) dentro del cuadro de diálogo modal es desplazable…

Mi mejor intento hasta ahora me dio el resultado en la imagen:

Cuadro de diálogo Modal con fija de encabezado y pie de página y contenido desplazable

Supongo que después de ver la imagen que no tiene que describir cuál es el problema… y también asumo que usted sabe lo que la solución tiene que ver… 🙂

Pero sólo para estar seguro de que voy a escribir de todos modos… El cuadro de diálogo modal debe tener un encabezado fijo (Zona donde el título de «Editar junta» «nombre del foro» y «tipo» se encuentra) y pie de página (Área donde el botón «GUARDAR» que se encuentra) haveto ser fijo/unscrolable… la única cosa que tiene que ser desplazable es la lista de usuarios…

CÓDIGO:

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

Así que si alguien podría por favor decirme qué estoy haciendo mal en mi código o si debo de estar haciendo algo diferently que sería bueno…

He utilizado estos ejemplos de código de este…Ejemplo no.1 & Ejemplo no.2

NOTA: estoy usando el Materializan marco

  • Con una breve mirada parece que tu HTML con formato incorrecto. Si te las arreglas para ponerlo a la derecha se quiere, al menos, fijar la altura del div class=’modal-content’ y hacer que el pie de página de la posición absoluta. Su mejor oportunidad para una solución a este problema es hacer más trabajo para hacer de un fragmento o JS Violín que ilustra un corte hacia abajo la versión de HTML y css por lo que puede ser inspeccionado en F12 navegador / dev tools.
  • cuál debe ser la altura correcta? Debería ser un nomber o cualquier otro valor?
  • Véase mi edición, que nadie puede dar una respuesta clara hasta que se haga un poco más de trabajo y editar tu pregunta para que sea más precisa. La idea es que haga un poco de trabajo, nos muestran claramente el problema y nos dirá cómo arreglar.
  • así que hice aplicar height a class="modal-content" y position:absolute al pie de página y nada ha cambiado…
  • Así que este es el punto de proporcionar un JS Violín. Ir a jsfiddle.net y establecer una demostración, a continuación, voy a comentar.
  • Revise su CSS para los problemas de sintaxis, hay un par de falta corchetes

InformationsquelleAutor weinde | 2016-12-23

5 Kommentare

  1. 8

    Puede intentar max-height utilizando calc() de su función, como:

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

    Tener una mirada en el siguiente fragmento (utilizar la pantalla completa):

    JS:

    $(document).ready(function(){
        //the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal();
      });

    CSS:

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

    HTML:

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

    Espero que esto ayude!

    • Este dosent trabajo… el encabezado y pie de página son scrolable y la foother overlapses los miembros…
    • El encabezado & pie de página no son desplazables. También los miembros no están superpuestos a pie de página. Por favor, compruebe de nuevo utilizando el modo de pantalla completa.
    • Lo hice y obtuve el resultado que me escribió… tal vez hay algo mal con mi navegador?
    • Me pueden enviar la captura de pantalla de mi código que se ejecuta en pantalla completa en su navegador?
    • ¿cómo puedo hacer eso?
    • Haga clic en Ejecutar fragmento de código botón y elija página Completa en la parte derecha del panel. El fragmento de código que va a ir a la pantalla completa. A continuación, tomar una captura de pantalla con PrntScrn (en windows) & cmd+shift+3 (en mac). Cargar la imagen en imgur.com o, como web & enviar a mí el enlace de la imagen en el comentario.
    • jajaja buen coment hombre xD solo necesitaba saber donde subir la imagen tho 😀 aquí u ir bro imgur.com/a/KKTHA
    • Así es como se ve en la mía – imgur.com/r9T5t39 . Se puede tratar de algún otro navegador o decirme la versión de chrome que utiliza?
    • Se parece a esto en Chrome Versión 54.0.2840.59 (64-bit) y Firefox 49.0
    • La mina se ejecuta Chrome Versión 55.0.2883.95 (64-bit) & Firefox 50.1.0 has probado a ejecutar el mismo en firefox?
    • He intentado correr el fragmento en mi versión de chrome y firefox y obtener el mismo resultado que la captura de pantalla…
    • Permítanos continuar esta discusión en el chat.
    • Estoy aceptando esta respuesta, pero el css valores se cambiaron a .modal-content { position: absolute; height: calc(100% - 256px); max-height: 100%; width: 100%; overflow-y: auto; }
    • Gracias @SauravRastogi : height: auto !important; max-height: calc(100vh - 340px) !important; CSS se trabajó para mí! Usted salvó mi tiempo! 🙂

  2. 2

    Tratar con esto sus obras

     <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>
  3. 1

    Yo no lo he probado con la versión 1 de Materializarse, pero esto es lo que estoy usando:

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

    Simplemente agregar la clase with-header a la modal y agregar un div de arriba ‘.modal-content’ así:

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

    El relleno sobrescribir elimina un píxel de ancho hueco que aparece si se cambia el fondo de .modal-encabezado.

  4. 0

    usted está buscando como esta?? Si no, entonces por favor, actualice su código en fiddler me va a hacer algo?

    HTML:

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

    • no… yo pensaba que este violín fue la descripción de mi problema… que todavía no se ha resuelto
    • corrección de sus Modales-div de contenido de la altura como esta :- <div class=»modal-content» style=»height:300px;overflow:scroll»>
    • Gracias 🙂 esto funciona, pero ahora tengo un enorme espacio en blanco entre el contenido y el pie de página xD
    • a continuación, reduce su altura de acuerdo a su requerimiento?
    • ok reducción de la altura y se ve bien ahora, pero el problema es que después de cambiar el tamaño de la ventana a una pequeña pantalla no se soluciona el problema…
    • thn usted necesita mirar para el bootstrap y consulta de medios de comunicación en css

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea