Question

我使用的插件包含我的select html元素，名为http://wenzhixin.net.cn/p/multiple-select/

插件工作正常，但我在overflow: hidden元素内部使用时遇到了一些问题，因为它只显示了部分select选项值。

点击卖家时，可以在此 JSFiddle 中看到此行为。

<div class="form">
    <div class="content form-horizontal">
        <div class="form-group">
            <label class="col-md-3">Name</label>
            <div class="col-md-7">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3">Seller</label>
            <div class="col-md-7">
                <select id="multiple-select" multiple>
                    <option>John</option>
                    <option>David</option>
                    <option>Muller</option>
                    <option>Maria</option>
                    <option>Britney</option>
                    <option>Mario</option>
                    <option>Fellaini</option>
                    <option>Mark</option>
                </select>
            </div>
        </div>
    </div>
</div>

.form div有css：

.form
{
  overflow: hidden;
  background-color: #fff;
  padding: 15px;
}

如何修复此问题以查看所有元素？

Answer 1

试试这个。将此css width:100%!important;添加到.ms-parent类，因为它已采用内联css，因此会将其覆盖并将overflow:hidden css移至.form类。

我更新了小提琴https://jsfiddle.net/58zg3268/2/

.ms-parent {    
    width:100%!important;
}

Answer 2

将overflow: hidden更改为overflow-y: auto，可以保持相同的表单高度。

.form
{
  overflow-y: auto;
  background-color: #fff;
  padding: 15px;
}

添加max width: 100%以防止选择框溢出并使所有输入的宽度相同。

.ms-parent {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    max-width: 100%;
}

Working demo

覆盖父溢出 - 选择

2 个答案: