how to make chosen select go over parent div

Question

I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.

The height of this parent div is fixed and set to 200px, and needs to remain this way.

How can I make chosen-select go over the parent div when clicked upon?

EDIT: jsFiddle updated with more CSS. If I comment the div.content, it doesn't mess up the layout.

The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.

Is there something I need to do for the header's positions?

EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.

What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.

Answer 1

Simply add this CSS class:

Added border to show you the definition of your other box is staying fixed.

div.content { position:absolute; }

View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/

When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.

Does this answer the question? I can elaborate further if you'd like.

EDIT:

absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).

Try just adding a spacer like so:

CSS:

div.filler {
    height:30px;
}

HTML:

...
<div class="filler">
<div class="content">
     <select class="chosen-select">
     ...

FIDDLE: http://jsfiddle.net/e62Wu/7/

ANOTHER Edit:

Try this:

JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/

Add CSS:

.hider {
    position:static;
}

Add ID in HTML:

<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>

Add jQuery if/else:

    if($this.attr('id')==='dropper'){
       $('.content').toggleClass('hider').toggleClass('content');
    }

Answer 2

I added

border: 1px solid black;

to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.

It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.

It's always something...