none
In a SharePoint List NewForm.aspx - Any JavaScript/JQuery/CSS to contain checkboxes in a text area so they become like this? RRS feed

  • Question

  • Hi there

    My list has a column with 100+ check-boxes - how can I show these check-boxes inside a scrollable text area on NewForm.aspx so they take less space?

    Any JavaScript/JQuery/CSS?

    Thanks.

    I want to make checkboxes like this:


    Friday, February 3, 2017 1:06 AM

Answers

  • Hi ran,

    We can set a smaller height for specific div and then set overflow-y property to scroll to make the checkbox scrollable.

    Here is a demo for your reference:

    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>

    CSS:

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

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by ran009 Monday, February 6, 2017 2:38 AM
    Monday, February 6, 2017 2:31 AM

All replies

  • I am not very familiar with CSS, but I think it can do this.

    顺其自然地勇往直前!—Justin Liu

    Friday, February 3, 2017 3:42 AM
  • Hi ran,

    We can set a smaller height for specific div and then set overflow-y property to scroll to make the checkbox scrollable.

    Here is a demo for your reference:

    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>

    CSS:

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

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by ran009 Monday, February 6, 2017 2:38 AM
    Monday, February 6, 2017 2:31 AM