CODEWITHSUNDEEP
javascriptjquerycssdatatables
user2577751
user2577751

Reputation: 91

How to stop a parent div expanding vertically when child div becomes visible

I have a parent div that has a height set on it.

There are child divs inside of it with initial visibility turned off.

When I make it visible, the parent div expands vertically. I dont want that.

Background:

I'm using DataTables, with the scroller and filterColumn plugins. The header of my table has an action on it assigned by jQuery that when I click on the a column header, a div is to appear below it and show some content. Issue is, when it appears, the header div expands.

I've tried overflow: hidden, auto, etc, but the closest i can get is the scrolling body seems to cover the floating div. I also set the z-index to above the scroller, but that doesnt do anything either.

Any suggestions?

Upvotes: 4

Views: 7574

Answers (2)

Travis J
Travis J

Reputation: 82297

use position:absolute on the element being shown to remove it from the page's flow. this will prevent it from affecting the width of the parent div.

Upvotes: 0

rgoraya
rgoraya

Reputation: 241

You can give the parent div a fixed height

.parent {
    height: 400px; 
 }

and make your child div have absolute position

.child {
    position: absolute;
}

Upvotes: 2

Related Questions