Question

I have a tab control with a bunch of check boxes on it (potentially more than I have shown here). I create the checkboxes in a loop like this:

<div id="mechanical" class="tabcontent">
    <% for (int i = 0; i < Model.MechanicalRisks.Count; i++)
       {%>
    <%= Html.CheckBoxFor(x => x.MechanicalRisks[i].IsChecked)%>
    <%= Html.DisplayFor(x => x.MechanicalRisks[i].Text)%>
    <br />
    <%} %>
    <br />
    Other:
    <br />
    <%= Html.TextAreaFor(x => x.OtherMechanical, new { style = "width:100%;" })%>
</div>

It looks like this:

I don’t like how the check boxes continue down the left side. I would prefer them to be in multiple columns, so if there were say twenty boxes, it would not be stupid tall. If I were to create multiple div’s for columns inside the tab, how would I go about dividing the checkboxes among the div’s?

Answer 1

This is more a styling issue than a C#/ ASP.NET MVC 2 issue

<ul>
<% for (int i = 0; i < Model.MechanicalRisks.Count; i++) {%>
<li>
    <%=Html.CheckBoxFor(x => x.MechanicalRisks[i].IsChecked)%>
    <%=Html.DisplayFor(x => x.MechanicalRisks[i].Text)%>
</li>
<%} %>
</ul>
<br />
Other:<br />
<%= Html.TextAreaFor(x => x.OtherMechanical, new { style = "width:100%;" })%>

Then create some new style or build off of #mechanical

#mechanical li
{
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
    list-style: none;
}