0

Tengo un modal, dividido en 2 columnas, la primera columna almacena información de un registro y la segunda un historial de cambios. El historial se llena hacia abajo con cada movimiento que se hace a la información. El problema es que llega un momento que son tantos comentarios que ya no caben en el div, así que apliqué un estilo para poder ver más abajo

.more-data-vertical{
    overflow-y: auto;
    overflow-x: hidden;
}

Sin embargo no me lo está tomando en cuenta al parecer por que no tiene un max-height, no le puedo poner uno fijo por que varía dependiendo del tamaño que tenga la información.

Agrego un fragmento de código, verlo en pantalla completa de favor.

.comentario{
  background-color: aliceblue;
  padding: 2%;
  margin: 5px;
  font-size: 0.7rem;
  border: 1px solid #7dd4cf;
  border-radius: 3px;
}

.more-data-vertical{
    overflow-y: auto;
    overflow-x: hidden;
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-7 col-md-7 data">
              <form action="/action_page.php">
                <div class="form-group">
                  <label for="email">Email address:</label>
                  <input type="email" class="form-control" id="email">
                </div>
                <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd">
                </div>
                <div class="form-group form-check">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                  </label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
            </div>
            <div class="col-lg-5 col-md-5 coms more-data-vertical">
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
            </div>
          </div>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

¿Cómo puedo establecer el max-height de mi DIV de comentarios que sea el height de mi DIV de información?

Intenté

.more-data-vertical{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: inherit;
}

No Javascript

1 respuesta 1

0

Y si le das un maximo de alto a la columna de la izquierda, pero relativo al viewport algo así:

@media (min-width: 768px){
  .more-data-vertical {
    max-height: 50vh;
  }
}

.comentario{
  background-color: aliceblue;
  padding: 2%;
  margin: 5px;
  font-size: 0.7rem;
  border: 1px solid #7dd4cf;
  border-radius: 3px;
}

.more-data-vertical{
    overflow-y: auto;
    overflow-x: hidden;
}

@media (min-width: 768px){
  .more-data-vertical {
    max-height: 50vh;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-7 col-md-7 data">
              <form action="/action_page.php">
                <div class="form-group">
                  <label for="email">Email address:</label>
                  <input type="email" class="form-control" id="email">
                </div>
                <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd">
                </div>
                <div class="form-group form-check">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                  </label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
            </div>
            <div class="col-lg-5 col-md-5 coms more-data-vertical">
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
              <div class="comentario">COMENTARIO 1</div>
            </div>
          </div>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.