css - JQuery Chosen Selectbox in Container with overflow: hidden -

i'm trying use chosen style selectboxes in application. unfortunately acts different native select boxes when comes containers overflow: hidden.

when open popup not (or pertially be) visible.

html:

<div class="layoutcontainer">     <select class="select-chosen">         <option>option a</option>         <option>option b</option>         <option>option c</option>     </select>     <select>         <option>option a</option>         <option>option b</option>         <option>option c</option>     </select> </div> 

css:

.layoutcontainer{     background: #660066;     overflow: hidden;     height: 40px; } 

javascript:

$(document).ready(function(){     $(".select-chosen").chosen({         disable_search : true,         width: "150px"     }); }); 

and here's corresponding jsfiddle

is there solution problem?

i ran same issue today, did basic research , came quick solution.

in function results_show(), find following lines:

this.search_field.focus(); this.search_field.val(this.search_field.val()); this.winnow_results(); 

below that, add code follows.

case #a

your container window.

code:

var _cont=$(window); 

case #b

you use other container set overflow hidden. in example element given class name .layoutcontainer.

code:

var _cont=$(this.container).parentsuntil('.layoutcontainer').parent(); 

---

then, below either of lines above, add following code:

var _containerheight = _cont.height(); var _elementheight = $(this.container).find('ul').height(); var _elementtop = $(this.container).offset().top; var _xh=$(this.container).outerheight();  if (_containerheight - (_elementheight + _elementtop) + _xh < 0) {   this.dropdown.css({       bottom: _xh,       top: 'auto'   }); } else {   this.dropdown.css({       top: _xh,       bottom: 'auto'   }); } 

and that's it.

explanation

we gather required information compute whether droplist overflows wrapping container (that set overscroll hidden). once have that, check if overflowing , if yes, set use bottom-based positioning instead of top-based. otherwise revert top-based.

this works because droplist positioned relative chosen container, usage of bottom results in list being aligned topwards.

considerations

the .chosen-drop box-shadow kind of annoying once droplist gets positioned above element (instead of below). counteract this, dynamically added class if element overflowing, , remove if element not.

disclaimer

this code far perfect! didn't optimization. supplied myself quick fix , wanted share other seekers run same problem.

please feel free post improvements this.

this code assumes classic, basic version of chosen @ current version (1.1.0).