Question

我有一个包含一些下拉列表的html表。

<table>
    <thead>
        <tr>
            <th>@Html.LabelFor(model => model.WorkorderId)</th>
            <th>@Html.LabelFor(model => model.SubmissionDate)</th>
            <th>@Html.LabelFor(model => model.PartId)</th>
            <th>@Html.LabelFor(model => model.ActivityId)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, string.Empty)</td>
            <td>@Html.TextBoxFor(model => model.SubmissionDate, "{0:MM/dd/yyyy}", new { @class = "datefield" })</td>
            <td>@Html.DropDownList("PartId", (SelectList) ViewBag.Parts, string.Empty)</td>
            <td>@Html.DropDownList("ActivityId", (SelectList) ViewBag.Activities, string.Empty)</td>
        </tr>
    </tbody>
</table>

其中一个专栏（PartId专栏）有很长的描述。这几乎占据了整个页面。

12345 - The very long description for Part

我想将下拉列表的宽度限制为PartNumber（没有Description）。现在，下拉列表的宽度等于PartNumer的最长 - 描述。

有没有办法只显示PartNumber（12345）选中它，但是当点击下拉列表时显示整个事物（数字 - 描述）？

Answer 1

将下拉列表的宽度限制为150px：

 @Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, new { @style = "max-width:150px;" }

Answer 2

您可以在MVC html助手中添加样式。只需使用＆＃34; New＆＃34;关键字后跟括号，括号括起来添加你的风格。像这样：

 @Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, new { style = "width:100px;" }

或者您可以定义CSS类并在html帮助器中应用您的类。您可以访问here查看两种方式。

Answer 3

如果在select元素上设置CSS宽度，它会将元素的宽度固定为您想要的宽度。但是，选项仍将显示完整的数字和说明。

select {
    width:10em;
}

如何限制下拉列表的宽度

3 个答案: