overflow:auto property only adding a horizontal scrollbar?

Question

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:

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.

@AbhishekKumar hidden hides the horizontal scrollbar, but it still doesn't give a vertical one (nor would I expect it to? isn't that the point of hidden? it just clips anything that overflows) — sab669
– sab669, Commented Aug 3, 2016 at 12:36

Felix A J · Accepted Answer · 2016-08-03 12:36:33Z

1

Add height to the container

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

answered Aug 3, 2016 at 12:36

Felix A J

6,5003 gold badges29 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sab669 Over a year ago

Thanks! I added a height and set overflow-x:hidden;, for some reason it was automatically just adding that horizontal scrollbar no matter what. All good now, though.

Collectives™ on Stack Overflow

overflow:auto property only adding a horizontal scrollbar?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related