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

Question

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":

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

Could you post screenshot or [jsfiddle](https://jsfiddle.net/)? — Win, Apr 19 '16 at 16:23
For the `container` to respect a height given in percent, its parent also must have one, and if that as well is given in percent, the next parent etc. Can you tell if that is the case? — Asons, Apr 19 '16 at 16:34
Your second option is to set the `containers` height using viewport units `vh`, so if your 25% is about 25% of the viewport, that should work for you — Asons, Apr 19 '16 at 16:37
@rogerdeuce: If you mean horizontally, no; vertically is fine, I just want to limit the size (both width and height) that the checkboxes take up. — B. Clay Shannon-B. Crow Raven, Apr 19 '16 at 16:48
@LGSon: Yes, the parent is a bootstrap class that takes 50% of the total width. So I want the checkbox container to take 50% of *that* — B. Clay Shannon-B. Crow Raven, Apr 19 '16 at 16:53
Then I need you to post a working code snippet reproducing the issue or else it will be to much guessing. — Asons, Apr 19 '16 at 16:57

score 1 · Accepted Answer · edited Apr 19 '16 at 17:44

1

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>

edited Apr 19 '16 at 17:44

Asons

84,923
12
110
165

answered Apr 19 '16 at 16:42

Quan Do

141
8

While @LGSon is strictly correct in what he says, this does partially solve the problem. It creates "list box items" though instead of checkboxes. I need checkboxes. Only one can be selected by the user. – B. Clay Shannon-B. Crow Raven Apr 19 '16 at 16:58
Sure, I also post this if other people wants list boxes – Quan Do Apr 19 '16 at 17:01
1

@B.ClayShannon If your main requirement is "only one can be selected", removing the `multiple` attribute from the `select` element in this answer will solve that. – Asons Apr 19 '16 at 17:06

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Setting a float to the container will allow you to set the width and height.

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

EDIT

This should do the trick but to set the container height in percent you should have a look at Percentage Height HTML 5/CSS

edited May 23 '17 at 12:16

Community

1
1

answered Apr 19 '16 at 16:37

Martin Cup

2,399
1
21
32

1

No, that is not enough if OP wants to use percent, as clearly stated in the question. – Asons Apr 19 '16 at 16:39

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

UPDATE

UPDATE 2

2 Answers2