B. Clay Shannon B. Clay Shannon - 7 months ago 12
HTML Question

How can I restrict the height and width that a container takes?

I'm using a class to envelop an array of dynamically-created checkboxes, which was originally:

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


In my ASP.NET MVC app, I have the following code in the View (Index.cshtml):

<div class="container">
@foreach (var item in rows)
{
<input id="ckbx_@(item.unit)" type="checkbox" value="@item.unit" />@item.unit<br />
}
</div>


This causes the container to simply wrap around the entire group of checkboxes, but I want to limit its height and width. The container is taking all the real estate available, which is 50% of the width of the usable area, as it is in a bootstrap "6" column:

<div class="col-md-6" name="unitsCheckboxDiv">
<h4>Select a Unit</h4>
<div class="container">
@foreach (var item in rows)
{
<input id="ckbx_@(item.unit)" type="checkbox" value="@item.unit" />@item.unit<br />
}
</div>
. . .


I thought maybe reducing the width and height percentages of the container class would do the trick:

.container {
border: 2px solid #ccc;
width: 50%;
height: 25%;
overflow-y: scroll;
}


...but it makes no difference.

What can I do to restrict the height and width to a fraction of its current expansion?

UPDATE



Here is a screenshot for "Win":

enter image description here

The list goes all the way down, for "miles".

UPDATE 2



This cuts the mustard:

<label class="control-label">Select a Unit</label>
<select class="form-control, container">
@foreach (var item in rows)
{
<option id="ckbx_@(item.unit)" value="@item.unit">@item.unit</option>
}
</select>


...so the correct answer is a tie: Quan Do and LGSon

Answer

Consider using a select instead. I think it is a good alternative to putting many checkboxes in a scrollable div like what you did.

<div class="col-md-6">
    <label class="control-label">Select a Unit</label>
    <select class="form-control">
        @foreach (var item in rows)
        {
            <option id="ckbx_@(item.unit)" value="@item.unit">@item.unit</option>
        }
    </select>
</div>
Comments