Unable to set jquery multi select width

Question

I use jquery multi select for dropdown to give the user the option to select multiple items from the dropdown

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>

Styles are defined 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 problem: I cannot set the width of the dropdown. I use the same style for multiple components. But only one jquery multiselect does not get the width property. See image below:

Also, when I select multiple elements, the selected text goes beyond the specified width. See image below:

If I use a regular dropdown, it works fine in this case. Thanks in advance for any valuable suggestions.

Answer 1

.css():

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

.

style classes:

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

, .

Answer 2

, multiselect , , , . , , , :

#drpTraj{
    width: 350px;
}

.