CODEWITHSUNDEEP
asp.net-mvclistboxmulti-select
GANI
GANI

Reputation: 2059

How to set the dropdown width for multi select listbox mvc

here is my listbox editor template

@if (ViewData[fieldId + "_list"] is   System.Collections.IEnumerable)
   { 
    @Html.ListBox("", new MultiSelectList((System.Collections.IEnumerable)ViewData[fieldId + "_list"], "Value", "Name", Model),
    new { @style = "margin:0px; width:225px;", @class = "multi-select", multiple = "multiple", data_placeholder = " " })
   }
   else
    { 
@Html.ListBox("", new MultiSelectList(new List<SingleValueHolder<int>>(), Model),
    new { @style = "margin:0px; width:225px;", @class = "multi-select", multiple = "multiple", data_placeholder = " " })}

if we set the width here the whole listbox width is set.

Upvotes: 2

Views: 1971

Answers (2)

karthickj25
karthickj25

Reputation: 1197

You need two listbox one with desired width, another which holds the value. then use the magic z- index to hide the one with big drop down

see this LINK TO JSFIDDLE 

<div> <span> <select readonly='readonly' id='sel' name="sometext" style = "width:55px;position: absolute; z-index: -1">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option> 
    <option >some very long text </option>         
</select>
   <div  style="width:500px;height:25px ;background-color:white; z-index: 10" >
       <div id="ddiv" tyle="width:500px;height:25px ;background-color:white; z-index: 15" />
       <select id='dummy' style = "width:65px;position: absolute; z-index: 10">
             <option style="display:none">text1</option>
    <option style="display:none">text2</option>
    <option style="display:none">text3</option>
            <option style="display:none">some very long text </option>  
       </select>
       </div>
   </span>
</div>

and in javascript

$('#sel').change(function () {
$('#dummy').val($('#sel').val());
});

$('#ddiv').click(function () {
open($('#sel'));
}
);

function open(elem) {
if (document.createEvent) {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    elem[0].dispatchEvent(e);
} else if (element.fireEvent) {
    elem[0].fireEvent("onmousedown");
}
}

Upvotes: 2

AdityaK
AdityaK

Reputation: 339

I think you are setting the html attributes of whole List box i.e:@html.Listbox. so in result you will get the width for the same.

Upvotes: -1

Related Questions