Question

我有一个电话配件清单，清单上是它的materialNumber和名称的组合-有时会很长，超过了列表框的宽度。（Html.ListBoxFor）

我决定向其中添加水平滚动，但是通过添加溢出，首先attemp在chrome中检查元素，然后在代码中添加了它。

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

按计划，水平滚动出现并工作完美，直到我选择了一个元素。原始列表框结束时，所选元素被剪切。

以下是显示问题的小提琴的链接：https://jsfiddle.net/yf0cgm9x/ 当您选择长名称时，它们会被剪切掉。

有人遇到这样的问题吗？

Answer 1

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>

有没有一种方法可以防止Html.ListBoxFor剪切所选项目的溢出文本？

1 个答案: