Altura del cuadro de diálogo de Jquery y barra de desplazamiento vertical

Question

Estoy devolviendo datos a través de ajax para completar un diálogo de jquery. El ajax es básicamente una tabla html con una cantidad variable de filas.

Me gustaría que el cuadro de diálogo se expanda para mostrar las filas, hasta cierto tamaño vertical (350px), en cuyo punto debe mostrar una barra de desplazamiento vertical.

Por lo tanto, esto parece funcionar bien - el diálogo cambia de tamaño correctamente dependiendo del número de filas. Pero, nunca tengo la barra de desplazamiento vertical, así que si tengo 20 filas, solo puedo ver las últimas 9.

¿Cómo fuerzo la barra de desplazamiento vertical si la altura hubiera sido mayor a 350px?

$.ajax({ 
    type: 'POST', 
    url: 'myurl', 
    data: postdata, 
    dataType: 'json', 
    success: function (result) { 
     if (result.success && result.data) { 
      var $dialog = $('<div></div>').html(result.data).dialog({ 
       autoOpen: false, 
       title: 'History', 
       modal: true, 
       height: Math.min((result.rows * 25) + 150, 350), 
       width: 800 
      }); 
      $dialog.dialog('open'); 

     } 
     event.preventDefault(); 
    } 
}); 

Answer 1

Debe añadir propiedad CSS para overflow:auto div contenido.

$("<div></div>").css({height:"350px", overflow:"auto"}); 

Si sólo necesita desplazamiento vertical overflow-y:auto y overflow-x:hidden

Answer 2

utilizar CSS max-height: 350px; y desbordamiento: automático; .. debería estar bien

Answer 3

No quería dar una altura de px fija, así que encontré una solución que le daba al modelo las siguientes reglas de CSS.

.modal { 
    display: inline-block !important; 
    max-height: 90%; 
    overflow: auto;/* Or scroll, depending on your needs*/} 

Espero que te sirva.