Bootstrap下拉选择长内容浮出浏览器资源管理器和Firefox

Question

我有一个右侧面板，其中包含下拉列表（html select元素）。我的一些列表项很长。所以我在Firefox和Explorer浏览器上看不到。这是working code。

<div class="rightPanel">
    <div class="rightPanelContent">
        <div class="panel panel-primary">
            <div class="panel-body"> 
              <form role="form">
                <div class="form-group">
                  <label for="sel1">Select list (select one):</label>
                  <select class="form-control" id="sel1">
                    <option>This is small content</option>
                    <option>This is  a very very very large content</option>
                    <option>This is medium</option>                    
                  </select>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>

这是css代码：

.rightPanel{
    border:1px solid red;
    height:100%;
    position:absolute;
    right:0;
}
.rightPanelContent{
    width:250px;
    padding:10px;
}

我使用了bootstrap下拉类但结果相同。

资源管理器和Firefox视图。

Chrome浏览器

Answer 1

我建议您使用bootstrap button dropdowns代替<select>，以便我们可以更好地控制尺寸和所有内容