iframehtmlcheckboxscrollable

Scrollable box containing list of Checkboxes in HTML


Attached you'll see a picture of a mock up I did for the required UI. As you can see I need some type of scrollable box that contains checkboxes.

enter image description here

I've thought of a scrollable div, although I can't find a way to set a border around a div? Second I thought of an IFrame.. But also not too sure if this is my best option.

Does anybody perhaps have an easier/better way of doing this?


Solution

  • CSS:

    .container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }
    

    HTML:

    <div class="container">
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
        <input type="checkbox" /> This is checkbox <br />
    </div>
    

    How it looks:

    design

    Is this what you are looking for?