jquery - 下拉框出现在屏幕外

Question

我在当前的 MVC 元素中遇到下拉框问题。似乎当页面滚动时，选项框会偏移并出现在屏幕外。我四处阅读，发现有几个人遇到了同样的问题，但我一直找不到解决方案。

这是我用来创建下拉框的代码。

<div class="form-group">
    <div class="col-sm-8">
    <div><label class="control-label">What injuries were sustained?</label></div>
    <div class="text-muted">Select as many as necessary.</div>
        @(Html.Kendo().MultiSelect()
            .Name("injuries")
            .HtmlAttributes(new { @class = "form-control", @id = "injuries"})
            .DataTextField("Name")
            .DataValueField("ID")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                   read.Action("GetInjuries", "Incident");
                });
             })
          )
    </div>
</div>

在这里，我使用的是 Kendo 多选，但我已经查看过，任何使用列表项的下拉元素都会遇到这个问题。

我有一个示例图像，我缩小了图像以便可以看到问题。当一直放大并且用户滚动到框时，它完全没有屏幕。

如有任何帮助，我们将不胜感激。

Answer 1

删除任何不必要的<div>来自 <label>和你的“输入”标签。这些都会影响你的造型。您输出的 html 应该如下所示:

<div>
  <label for="name">Text Input:</label>
  <input type="text" name="name" id="name" value="" tabindex="1">
</div>

如果这不能使事情变得更整洁。让您的输入 parent 有一个 position: relative和下拉元素 a position: absolute然后添加 top:0 .而且，应该更近一些。如果将父 div 的宽度设置为百分比数字。然后为子元素(输入、下拉)设置 100% 的宽度，这样它们就不会在水平方向上出现偏差。