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.

If you make a jsfiddle I think people will be a little more motivated to help :) — A. L, Dec 07 '16 at 12:43

score 0 · Answer 1 · answered Dec 07 '16 at 12:47

0

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.

answered Dec 07 '16 at 12:47

Zakaria Acharki

66,747
15
75
101

Tried both the solutions. But still the behavior is just the same – ViVi Dec 07 '16 at 12:53
Try please to provide a fiddle or snippet that reproduce you issue. – Zakaria Acharki Dec 07 '16 at 12:54

score 0 · Answer 2 · answered Dec 07 '16 at 14:36

0

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.

answered Dec 07 '16 at 14:36

Elek Guidolin

487
1
8
21

Did you checked if it's not another error using your browser console? When I was trying to fix in my project, Jquery.multiselect.js were throwing an error that tell me AndSelf() is not a recognized method. I've changed the Jquery version to 1.6.4, and then it worked, but only using the id. http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js – Elek Guidolin Dec 08 '16 at 12:57

Unable to set the width of jquery multi select

2 Answers2