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 se

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...