下拉框出现在屏幕外

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>

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

我有一个示例图像，我已缩小，因此问题可见。当完全放大并且用户滚动到框时，它完全是屏幕。

任何帮助都将不胜感激。

Answer 1

从<div>和您的＆＃34;输入＆＃34;周围删除任何不必要的<label>。标签。这些会影响你的造型。以下是您输出的html应该如下所示：

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

如果这样做不会使事情变得更整洁。让您的输入父级为position: relative，下拉元素为position: absolute，然后添加top:0。而且，它应该更接近。如果将父div设置为具有百分比的数字宽度。然后子元素的宽度为100％（输入，下拉），然后这些也不会在水平方向误入歧途。