首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有没有办法防止Html.ListBoxFor剪切所选项目的溢出文本?

有没有办法防止Html.ListBoxFor剪切所选项目的溢出文本?
EN

Stack Overflow用户
提问于 2019-05-21 01:43:18
回答 1查看 284关注 0票数 0

我有一个手机配件列表,列表中的条目是它的materialNumber和一个名称的组合-有时它会变得很长,超过列表框的宽度。(Html.ListBoxFor)

我已经决定添加水平滚动到它,但通过添加溢出,首先尝试在chrome中的元素检查,然后我在代码中添加它。

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

正如计划的那样,水平滚动显示并完美工作,直到我选择了一个元素。所选元素在原始列表框结束时被剪切。

这里有一个指向fiddle的链接,显示了问题:https://jsfiddle.net/yf0cgm9x/当您选择长名称时,它们将被剪切。

有人遇到过这样的问题吗?

EN

回答 1

Stack Overflow用户

发布于 2019-05-21 03:12:48

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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56225800

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档