Невозможно установить ширину JQuery множественного выбора

Question

Я использую JQuery несколько выбрать для падения вниз для того, чтобы дать пользователю возможность выбрать несколько элементов из выпадающего

HTML код:

<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> 

стили определены, как показано ниже:

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

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

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

$(document).ready(function() { 

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

}  

Мой вопрос я не могу установить ширину выпадающего списка. Я использую тот же стиль для нескольких компонентов. Но только один jquery multiselect не получает свойство width. См. Изображение ниже:

Также, когда я выбираю несколько элементов, выбранный текст выходит за указанную ширину. Смотрите изображение ниже:

Если я использую обычный выпадающий список он прекрасно работает в этом случае. Заранее благодарим за любые ценные предложения.

Answer 1

Вы пытались установить ширину с помощью .css():

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

Я использую тот же стиль для нескольких компонентов.

Вы можете задать класс, у которых есть свой style в опции classes:

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

Надеется, что это помогает.

Answer 2

Это происходит из-за того, что мультиселектор преобразует ваш выбор в тег, недостаточно довольный, он удаляет все классы, которые вы применяете для выбора. Так что лучший способ сделать это слушаться вас, оказывает класс, приложенный к ID объекту:

#drpTraj{ 
    width: 350px; 
} 

Надеется, что это поможет.