CODEWITHSUNDEEP
jqueryjquery-chosen
Migwell
Migwell

Reputation: 20117

Why is the Chosen not displaying the proper UI?

Essentially I have the problem that the Chosen UI looks like this: http://i.imgur.com/hJsb4Yh.png

There's no drop down box, the selected item appears above the text box, and there are random dot points in front of each item.

I won't post my whole project, but I'm using the html Boilerplate, and I just extracted the plugin to a folder 'Chosen' inside the 'Site Root'. Then, I added another link at the bottom:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="chosen/chosen.jquery.js"></script> <!--I added this-->

Then, at the bottom of my main.js file, I added this:

$(document).ready(function() {
    jQuery(".chzn-select").chosen();
});

And finally this is the html for the dialog you're seeing at the moment:

 <div class="messagepop pop">
        <form method="post" id="new_message" action="/messages">
            <p>
                <select id="subject_select" class="chzn-select" >
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </p>
            <p>
                <input type="button" value="OK" name="commit" id="message_submit"/>
                <input type="button" value="Cancel" name="commit" id="message_cancel"/>
            </p>
        </form>
    </div>

Any idea why this is happening? Thanks.

Upvotes: 0

Views: 266

Answers (1)

Anto Subash
Anto Subash

Reputation: 3215

you have added only the js file of chosen. you have to add the chosen.css file which is associated with the plugin into the web page.

Upvotes: 1

Related Questions