scrollbaren Dialog in jquery

Question

ich versuche, „DEMO 3“ auf dieser Seite zu replizieren:

http://www.mudaimemo.com/p/simpledialog/

es funktioniert super, außer dass ich die Checkbox-Liste dynamisch ausfülle und manchmal habe ich mehr Kontrollkästchen als fit auf der Seite. gibt es sowieso, um diese scrollbar zu machen, so gibt es eine maximale Größe, wie es jetzt gerade vom Bildschirm geht.

EDIT: Wenn ich versuche, eine Höhe zum Javascript hinzuzufügen, kommt die Box die richtige Höhe, aber die Checkboxen gehen weiter auf der Seite. Wie behalte ich die Kontrollkästchen im Container und habe eine vertikale Bildlaufleiste?

$(document).ready(function() { 
    $('#sdHc3').simpleDialog({ 
    showCloseLabel: false, 
     height: 400, 
     open: function() { 
      $('#checkboxStatus').html(''); 
     }, 
     close: function() { 
      var c = []; 
      $('#checkboxForm :checkbox:checked').each(function() { 
       c.push($(this).val()); 
      }); 
      $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show(); 
     } 
    }); 

Answer 1

Überlauf: Scroll;

in der CSS für den Container div, stellen Sie sicher, dass Sie eine Höhe festlegen. Das Problem ist, dass nicht alle Browser Max-height unterstützen und Ihr Div immer die gleiche Größe hat (außer Sie geben jedes Mal an, wenn Sie diese Funktion benötigen, eine andere Höhe)

In Ihrer CSS-Datei (in diesem Fall) tun es in der CSS-Datei: jquery.simpledialog.0.1.css, wenn Sie die heruntergeladene Datei nicht umbenannt haben):

.sd_container{ 
font-family: arial,helvetica,sans-serif; 
margin:0; 
padding: 10px; 
position: absolute; 
background-color: #fff; 
border: solid 1px #ccc; 
text-align:center; 
**overflow: scroll;** 
} 

(ohne die Sterne oFC)

Answer 2

CSS:

#scrollableDiv 
{ 
    overflow: auto; 
    height: 549px;/* IE is dumb */ 
    max-height: 549px;/* Or the amount of pixels you want */ 
}