Give height and overflow-y in a div

Question

Give height and overflow-y in a div

Navigation

#1 by (4 votes)
#2 by (1 votes)

4

I'm trying to give height and overflow-y to div to limit the size of div and add a scroll.

Something like this:

ForthisIamloadingalistofdatacomingfromDB(IamworkingonASPMVC)inthediv,andIaddtheheightandtheoverflow-yinit:

<divid="divListaEstabs" style="height: 60%; overflow-y: scroll;">
        <input type="checkbox" id="selectall">Seleccionar todos
        <br />
        @foreach (var item in ViewBag.estabelecimentos)
        {
            <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
        }
</div>

Problem?

The scroll is added to the div, but it is not limited in height, increasing the size of the page (as shown in the image):

css asp.net-mvc

asked by anonymous 17.04.2014 / 11:33

2 answers

1

Try changing, from heigth to max-heigth, so you'll have more flexibility and responsiveness in the modal:

<div id="divListaEstabs" style="max-height: 10em; overflow-y: scroll;">
    <input type="checkbox" id="selectall">Seleccionar todos
    <br />
    @foreach (var item in ViewBag.estabelecimentos)
    {
        <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
    }
</div>

17.04.2014 / 13:25

Collapsing text in a single line in a database Web Api Client in Windows Forms

score 4 · Accepted Answer

You have the height in%. Experiment on px:

<div id="divListaEstabs" style="height: 60px; overflow-y: scroll;">
        <input type="checkbox" id="selectall">Seleccionar todos
        <br />
        @foreach (var item in ViewBag.estabelecimentos)
        {
            <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
        }
</div>