Multiple options select with chosen-js

Question

I'm trying to create a multiple option selector using chosen-js .

This codepen, shows what I'm trying and how it's different from what I'm expecting (eg this jsfiddle example ). The below snippets highlight the relevant html and js. I'm nesting the <select> tags within a bootstrap4 container and col-12 :

index.html

<div class="container">
    <div class="row" style="height: 100vh;">
        <div class="col-12 mt-4 mb-4 h-100" id="test">
            <div class="mt-4 header">
                <p>Choose some games!</p>
            </div>
            <select id="mySelectId" data-placeholder="Add skills..." class="chosen-select" multiple="multiple">
                <option value="Chess">Chess</option>
                <option value="Monopoly">Monopoly</option>
                <option value="Cards">Cards</option>
                <option value="Cluedo">Cluedo</option>
                <option value="Snap">Snap</option>
            </select>
        </div>
    </div>
</div>

choose.js

$(".chosen-select").chosen({width: "50%"});

While it is working to some extent - see pen - the behaviour is not as expected:

• Clicking on the form automatically selects and enters an option
• After clicking in the form, the option list is full width (overlapping any entered text) and disappears quickly after first appearing - hopefully this is apparent in the codepen

Am I doing something obviously wrong?

Answer 1

I checked your fiddle saw a style

 .center_v a, h1, p, ul {
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

In that style, the transform property was the reason for your problem. try to add your own class rather than giving styles directly to tags like p ul.. etc