0

I have a list of accessories for phones and entry on a list is combination of its materialNumber and a name - sometimes it gets long and exceeds the width of listbox. (Html.ListBoxFor)

I have decided to add horizontal scroll to it but by adding overflow, first attemp was inside element checking in chrome then i added it in code.

@Html.ListBoxFor(model => model.myId, MyModel, new { @id = "my-id :)", @class = "form-control input-md", @size = 9, @style="overflow: auto;"})

As planned the horizontal scroll appeared and worked perfectly until I selected an element. Selected element got cut at the moment where original listbox ends.

Here is a link to fiddle showing the problem : https://jsfiddle.net/yf0cgm9x/ when you select long names they are cutted.

Anyone had a problem like that ?

Adrian S
  • 77
  • 1
  • 5

1 Answers1

0
Try this:
    <div>
<div style="width:200px; padding-right:10px;border: 3px solid #73AD21;">

<select class="form-control input-md" id="available-accessories-box" multiple="multiple" name="SelectedAccessoryId" size="9" style="width:200px; overflow:scroll; display: block;">
<optgroup label="Headset">
<option style="overflow:wrap;" value="1">[11111111]aaaa</option>
<option style="overflow:wrap;" value="48">[22222]TOOOOOOO LOOOOONNNNNGGGGG1</option>
<option style="overflow:wrap;" value="50">[333333333]TOOOO LOOONGGGGG3</option>
<option style="overflow:wrap;" value="208">[444444]Hheadset5</option>
<option style="overflow:wrap;" value="226">[5555555]real headset by MSI</option></optgroup>
<span class="field-validation-valid" data-valmsg-for="SelectedAccessoryId" data-valmsg-replace="true"></span>

</div>

</div>
Cruz
  • 11
  • 2
  • when you try this solution in jsfiddle the problem still occurs – Adrian S May 22 '19 at 07:11
  • Found this. Hope you can work from this solution: https://stackoverflow.com/questions/3587942/word-wrap-options-in-a-select-list – Cruz May 23 '19 at 19:32