CODEWITHSUNDEEP
c#asp.net-mvc
Phill Sanders
Phill Sanders

Reputation: 487

Splitting dynamic list over several columns

I have the following code in my razor view to dynamically generate a list of interests and tick boxes next to them.

<div class="form-group">
  <div class="col-md-10 col-md-offset-1">
     <h3>Tick the areas your club is interested/runs events in</h3>
  </div>
</div>
<div class="col-md-offset-1">
    @for (int i = 0; i < Model.ClubTypeInterests.Count(); i++)
    {
        <div>
            @Html.HiddenFor(x => Model.ClubTypeInterests[i].InterestId)
            @Html.CheckBoxFor(x => Model.ClubTypeInterests[i].selected)
            @Html.LabelFor(x =>  Model.ClubTypeInterests[i].ListInterestName, Model.ClubTypeInterests[i].ListInterestName)
        </div>
    }
</div>

I'd like to spread it over 2 or 3 columns depending on how many items are in the list rather than just one long column. How can I achieve this?

Upvotes: 0

Views: 136

Answers (1)

Ric
Ric

Reputation: 13248

Why not create a new column for each iteration?

<div class="col-md-offset-1">
    <div class="form-group">
        @for (int i = 0; i < Model.ClubTypeInterests.Count(); i++)
        {
            <div class="col-md-2">
                @Html.HiddenFor(x => Model.ClubTypeInterests[i].InterestId)
                @Html.CheckBoxFor(x => Model.ClubTypeInterests[i].selected)
                @Html.LabelFor(x =>  Model.ClubTypeInterests[i].ListInterestName,Model.ClubTypeInterests[i].ListInterestName)
            </div>
    }
    </div>
</div>

So you offset the initial div by 1, then each loop iteration create a new div with the required elements. col-md-2 was used as an example, change it to what you require.

Upvotes: 2

Related Questions