bootstrap-select: after adding options to multiple select box it doesnt refresh correctly

Question

I am using bootstrap-select plugin ( http://silviomoreto.github.io/bootstrap-select/ ) to provide an option to select multiple values. I have a hash table with letters as key and words starting with corresponding letter as values. I have a drop down with list of letters and once a letter is selected the multi select box should be populated with the words for that letter.

.cshtml

<div class="row word-letter">
    <div class="col-md-3">
        <div class="input-group">
            <input type="text" class="form-control dropdown-text letterVal" placeholder="Select Letter" autocomplete="off" />
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu pull-right letterList"></ul>
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <select class="selectpicker" multiple title="No words available"></select>
    </div>
</div>

Once the letter from letterList is selected, the selectpicker should be populated with options corresponding to that letter in wordMap. And also the default title should change from "No words available" to "Select from following words". Below is the code snippet, theObject here is jquery handle to the dropdown-menu.

.js

var wordMap = {
    "A": ["Aware", "Analog"],
    "D": ["Dare", "Digital"],
    "F": ["Flare", "Fist", "Frame"]
};

var selectedLetter = theObject.text(); 
var wordSelectElem = theObject.parents('.word-letter').find('.selectpicker')
        if (wordSelectElem.length > 0) {

            $.each(wordMap[selectedLetter], function (key, value) {
                wordSelectElem.append($('<option>' + value + '</option>'));
            });
            if (wordSelectElem.size() > 0) {
                wordSelectElem.prop('title', "Select from following words");
            }
            wordSelectElem.selectpicker('refresh');
        }

When I run this in IE, I am seeing that the selectpicker adds the words in a weird way as below (eg: when D selected):

How can I fix this?

Answer 1

My best guess, from what I see above, is that you have a bit of errant CSS that is causing the problem. This would be very easy to locate using FireBug or any other browser based developer tools that will allow you to see what CSS is being applied to that element (or perhaps the surrounding elements).

If you can even post a link to the page in question (send it privately if there is concern about a public link) and I (or anyone else) can look at the elements in question.

If you try to reproduce this in JSFiddle and can't then all the more reason suspect the problem is local your CSS or code. Try removing all CSS files on the page except the Bootstrap.css and whatever CSS file comes with this control.