Wysokość okna dialogowego i pionowy pasek przewijania

Question

Wracam dane przez ajax, aby wypełnić okno dialogowe jquery. Ajax jest w zasadzie tabelą html ze zmienną ilością wierszy.

Chciałbym, aby okno dialogowe się rozwijało, aby wyświetlać wiersze, do pewnego rozmiaru w pionie (350 pikseli), w którym to momencie powinien pokazywać pionowy pasek przewijania.

Wygląda na to, że działa dobrze - okno dialogowe zmienia się prawidłowo w zależności od liczby rzędów. Ale nigdy nie otrzymuję pionowego paska przewijania - więc jeśli mam 20 wierszy, to widzę tylko ostatnie 9.

Jak wymusić pionowy pasek przewijania, jeśli wysokość byłaby większa niż 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

Powinieneś dodać właściwość css overflow:auto dla div zawartości.

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

Jeśli potrzebujesz tylko pionowy zwój overflow-y:auto i overflow-x:hidden

Answer 2

użyć CSS max-height: 350px; i przepełnienie: auto; .. powinno być w porządku

Answer 3

Nie chciałem podawać stałej wysokości px, więc znalazłem rozwiązanie dające modelowi następujące reguły css.

Mam nadzieję, że to zadziała.