jquery-chosen

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

I would like to hide certain elements from a dropdown that is created using the Chosen plugin. I have tried removing it: $( 'option:contains("Swatch 1")').remove().trigger("chosen:updated"); and just hiding it: $( '.chosen-results li:contains("Swatch 1")').css('display,'none'); But neither works. See Colours dropdown: http://www.carolineelisa.com/test/wordpress/product/machine/ Any help appreciated :) In the original select you need to hide the option. For example: $('select.chosen-select options:contains("Swatch 1")'); Then update the chosen options with: $('select.chosen-select').trigger(

I've done a sample Ember.js integration with Chosen (https://github.com/harvesthq/chosen) Coffeescript: App.ChosenSelectView = Em.Select.extend({ didInsertElement: -> @_super() @$().chosen() # Assumes optionLabelPath is something like "content.name" @addObserver(@get("optionLabelPath").replace(/^content/, "content.@each"), -> @contentDidChange()) contentDidChange: -> # 2 ticks until DOM update Em.run.next(this, (-> Em.run.next(this, (-> @$().trigger("liszt:updated"))))) }) The thing that bothers me is I don't have a good idea about how much time do I need before triggering update on the Chosen

I am using a modal based on the example from twitter bootstrap. I have a select element that uses chosen. When the chosen select drops down, it is cut off by the modal footer. I tried to add the z-index value on the chosen elements, but nothing works. I'm looking at it in tilt, and wonder if it is just because the select element is with divs that are before the modal footer div? I'm using the default CSS from chosen and bootstrap for this as well, so I haven't modified anything. example. HTML: <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true

At the moment I'm using a Chosen JQuery widget inside a JQuery dialog box, and as soon as you open the dropdown box, the size of the dropdown causes the dialog box to overflow, causing this: (notice that there are two scroll bars, one for the drop down box, and one for the dialog box, which renders scrolling pretty much useless: Is there a way to set: The max number of items displayed before you have to scroll, The max height of the select/chosen drop down box, or The max height of one of the containing elements Such that it will appear more like this (it's a photoshop, this is how I want it