chosen-js generated default WIDTH = 0

user_9986024 0
Viewed 539

Using chosen-js with symfony3 and encore Webpack I am trying to render a chosen element but the moment I load the CSS everything is broken, the generated div has width = 0

installed with yarn add chosen-js --dev

html:

<select id="cat-selector-lvl1"> 
   <option value='A1'>test1</option> 
   <option value='A2'>test2</option> 
   <option value='A3'>test3</option> 
   <option value='A4'>test4</option> 
</select>

JS (of the current page):

import $ from 'jquery'
import "chosen-js"
import "../css/chosen/chosen.min.css"
import "../css/chosen/chosen-sprite.png"
import "../css/chosen/chosen-sprite@2x.png"

$(document).ready( function(){
   $("#cat-selector-lvl1").chosen({disable_search_threshold: 10});
})

here is what I get:

enter image description here

the generated div is getting a width of 0; not sure why enter image description here

jquery-chosen javascript
1 Answers

specifying a width solved the issue, still think this is a bug to have default width to 0px

$("#cat-selector-lvl1").chosen({width: '200px'});
user_99860240
Related