CODEWITHSUNDEEP
c#asp.net-mvclistbox
loyalflow
loyalflow

Reputation: 14919

How to make the width of a Listbox wider when using the MVC helper @Html.ListBoxFor

I am using the MVC helper:

@Html.ListBoxFor(vm => vm.SelectedUsers, Model.UserSelectList, "--- All ---")

How can I make the listbox wider, currently the names are getting cut off.

Upvotes: 1

Views: 4228

Answers (3)

Jeff
Jeff

Reputation: 1

One of the CSS files set the max-width for a select object to 260px. Try adjusting the max-width:

@Html.ListBox("CurrentValues", Model.UserSelectList, new { @class="form-control",@style="max-width:600px;width:100%;" });

Upvotes: 0

Raja Nadar
Raja Nadar

Reputation: 9499

you can use the overloaded version of the method

Html.ListBoxFor(vm => vm.SelectedUsers, Model.UserSelectList, new { data-placeholder="-- All --", style = "width: 100%"});

etc. you can also give it CSS Classes and apply external styling.

Upvotes: 1

Selman Genç
Selman Genç

Reputation: 101732

Create a class for your listbox in CSS:

.listBox
{
   width: 200px; //set your width or make it auto
}

Then set the class attribute:

@Html.ListBoxFor(vm => vm.SelectedUsers, Model.UserSelectList,new { @class = "listBox" });

Upvotes: 0

Related Questions