sab669 sab669 - 2 months ago 7
CSS Question

overflow:auto property only adding a horizontal scrollbar?

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

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">
<th class="width-25 textalign-left k-header k-grid-header">
<span class="text-white">Field Name</span>
<th class="width-75 textalign-center k-header k-grid-header">
<span class="text-white">Condition</span>

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
containing the inner table has its
property set to
. 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.

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.


Add height to the container

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