Display large amount of checkboxes in a scrollable list in MVC 5 View

asp.net asp.net-mvc-5 c# entity-framework-6 many-to-many


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.

2/4/2016 2:25:54 PM

Accepted Answer

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

5/23/2017 11:52:28 AM

Popular Answer

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

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

Related Questions


Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow