sab669 sab669 - 4 months ago 9
CSS Question

overflow:auto property only adding a horizontal scrollbar?

I [unfortunately] have a table inside of a table. The last

<td>
of the outer table looks like so:

<td class="valign-top width-40 padding-right-4px">
<div class="grid-filter-container" style="overflow:auto;">
<table id="FilterColumns" class="fullwidth fimscaletable">
<thead>
<tr>
<th class="width-25 textalign-left k-header k-grid-header">
<span class="text-white">Field Name</span>
</th>
<th class="width-75 textalign-center k-header k-grid-header">
<span class="text-white">Condition</span>
</th>
</tr>
</thead>
<tbody></tbody>
<tbody></tbody>
</table>
</div>
</td>


The inner table programatically gets rows added to it, it's part of a data exporting module. The user is presented with a list of fields on the left, and then they can select it from the list and set some parameters and add it to this table on the right.

As you can see, the
<div>
containing the inner table has its
overflow
property set to
auto
. But during run time it only "gains" a horizontal scrollbar:

enter image description here

The table on the right started as the same size as the control on the left, but as I add more conditions to it, it grows in height. I want it to instead just scroll the div. Note this screenshot was taken in IE; haven't tested other browsers yet.

The
grid-filter-container
class is defined as so:

.k-window .grid-filter-container {
border: solid 1px #909090;
min-height: 200px;
padding: 0px;
margin: 0px;
}


js fiddle is actually blocked by my company's internet filters, otherwise I'd try to provide a sample.

Answer

Add height to the container

.k-window .grid-filter-container {
 border: solid 1px #909090;
 min-height: 200px;
 padding: 0px;
 margin: 0px;
   height: 200px;
}