Clever Geek Handbook

Scrollable dialog in jquery

I am trying to replicate "DEMO 3" on this page:

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

it works great except i populate the checkbox list dynamically and sometimes i have more checkboxes than on the page. there is anyway to make this scrollable so that there is a maximum size, since now it just leaves the screen.

EDIT: When I try to add the height in javascript, the box comes up to the correct height, but the checkboxes keep falling across the page. how can I store checkboxes in a container and have a vertical scrollbar?

$(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();
        }
    });
+2


source to share


2 answers


overflow: scrolling;

in the css for the container div, make sure you set the height. The problem is that not all browsers support maximum height and therefore your div will always be the same size (unless you specify a different height every time you need this function)

In your css file (in this case, do it in the css file: jquery.simpledialog.0.1.css, unless you renamed the uploaded file):



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

(no stars c)

+3


source


CSS



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


source






More articles:


All Articles