3

In this asp.net MVC 5 tutorial Tom Dykstra noted:

The approach taken here to edit instructor course data works well when there is a limited number of courses. For collections that are much larger, a different UI and a different updating method would be required.

Currently I'm working on some college project in MVC5 where "main" model has two many-to-many relationships. Both are large collections(400+) that should be binded(with multiple selections) to "main" model by using only checkboxes in Create or Edit methods. So, I took that mentioned asp.net MVC tutorial and made everything work fine, except page is loaded with 800 checkboxes so you have to scroll all the way down to submit button.

Is there any way to put all those checkboxes in one scrollable field?

Thank you in advance.

Community
  • 1
  • 1
Getz
  • 63
  • 7
  • Adding a paging facility would be the right way to do it instead of showing 800 checkboxes at once. – Gusman Feb 04 '16 at 14:43

2 Answers2

9

Encapsulate the checkboxes in a scrollable div.

<div id="divCheckboxes" style="overflow-y: scroll; height:500px;">

See an example here: Making a div vertically scrollable using CSS

Community
  • 1
  • 1
Andy Arndt
  • 385
  • 1
  • 7
1

Aside that showing 800 checkboxes is maybe not such a good idea, you can have one scrollable div wrapping them like this: 

<div style='overflow:auto; width:400px;height:100px;'>
    input checkboxes
</div>

maybe you'll have to play with width/height, but overflow css attribute does the trick with scrollbars.

Milap
  • 6,915
  • 8
  • 26
  • 46
Hrvoje Hudo
  • 8,994
  • 5
  • 33
  • 42