下拉框出現在屏幕上

我在我當前的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>

在此我使用的是劍道多選，但我已經通過看就是用列表項的任何下拉元件與問題困擾。

我有一個示例圖像，我縮小了所以問題是可見的。當一直放大並且用戶已經滾動到該框時，它完全是屏幕。

任何幫助，將不勝感激。

來源

2016-12-02 Matt Ponsford

試圖在CSS中的元素上設置'width'？ –

從<label>和您的「輸入」標記中移除任何不必要的<div>。這些會影響你的造型。這裏是你輸出的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％，那麼這些元素也不會橫向錯開。

來源

2016-12-02 11:55:36 edlee

下拉框出現在屏幕上

回答

相關問題