Unable to set the width of jquery multi select

Question

I am using a jquery multi select for a drop down in order to give user an opportunity to select multiple items from a drop down

Html Code:

<div class="jobdiv">
    <img src="~/Images/traj.png" width="22" height="24" />
    @Html.DropDownListFor(model => Model.TrajName, @Model.Traj,
    new { @class = "jobdrpdown", id = "drpTraj", onchange = "GetSelectedTraj(this.value); ", multiple = "multiple" })
</div>

The styles are defined as below :

.jobdiv {
    margin-right: 15px;
    margin-left: 15px;
    padding-bottom: 12px;
}       

.jobdropdown {
    width: 194px;
    font-size: 13px;
    font-family: Arial;
    margin-right: 5px;
    height: 24px;
}

In $(document).ready(function () :

$(document).ready(function () {

    $('#drpTraj').multiselect({
        nonSelectedText: 'Select items below',
        width : 180,
        minWidth : 180          
    });

}       

My issue is I am unable to set the width of the dropdown. I am using the same style for several components. But the jquery multiselect alone doesn't get the width property. See image below :

Also when I select few items, the selected text goes out of the specified width. See image below :

If I am using a normal dropdown it works fine in this case. Thanks in advance for any valuable suggestions.

Answer 1

Have you tried to set the width using .css() :

$('#drpTraj .ui-multiselect').css('width', '100%');

I am using the same style for several components.

You could set the class that have your style in the classes option :

$('#drpTraj').multiselect({
    nonSelectedText: 'Select items below',
    classes : "your-class-name"     
});

Hope this helps.

Answer 2

This is happening because the multiselect transforms your select into an a tag, not happy enought, it removes all the classes you apply to the select. So the best way to make it obey you, is having the class applied to the object id:

#drpTraj{
    width: 350px;
}

Hope this help.