在引导模式中显示 sumoselect
Posted
技术标签:
【中文标题】在引导模式中显示 sumoselect【英文标题】:Display sumoselect in bootstrap modal 【发布时间】:2018-02-15 18:01:15 【问题描述】:我正在使用 sumoselect 进行选择,并且此 sumoselect 处于引导模式中。
但是当我打开下拉菜单时,会添加滚动条,我必须滚动才能看到下拉选项。
如果我删除下面的 css 那么它可以工作,但是如果我删除那个 css 那么它会影响我的整个应用程序。
$('.testselect10').SumoSelect();
.modal-body
position: relative;
overflow-y: auto;
padding: 15px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<select style="width:200px;" name="somename10" class="testselect10">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="porsche">Porche</option>
<option value="ferrari">Ferrari</option>
<option value="hyundai">Hyundai</option>
<option value="mitsubishi">Mitsubishi</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
我想这样显示:
【问题讨论】:
所以你不希望下拉菜单中有滚动条吗? @ManishPatel,检查我更新的问题 【参考方案1】:只需添加仅对此模式有效的 css
$('.testselect10').SumoSelect();
#myModal .modal-body
position: relative;
overflow-y: inherit;
padding: 15px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<select style="width:200px;" name="somename10" class="testselect10">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="porsche">Porche</option>
<option value="ferrari">Ferrari</option>
<option value="hyundai">Hyundai</option>
<option value="mitsubishi">Mitsubishi</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
【讨论】:
我必须检查更改overflow
后是否影响其他地方。【参考方案2】:
从.modal-body
类中删除overflow-y: auto
。
$('.testselect10').SumoSelect();
.modal-body
position: relative;
padding: 15px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<select style="width:200px;" name="somename10" class="testselect10">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="porsche">Porche</option>
<option value="ferrari">Ferrari</option>
<option value="hyundai">Hyundai</option>
<option value="mitsubishi">Mitsubishi</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
【讨论】:
我知道如果我删除overflow-y:auto
它是有效的,但我不想删除它。
如果您可以使用jsfiddle.net 并向我们展示您的示例,因为解决方案就是@Ovidiu Unguru 所说的【参考方案3】:
尝试从 sumoselect 选项容器 div 中删除绝对位置。
在您的代码中添加下面的 css 并享受吧!
<style type="text/css">
.SumoSelect >.optWrapper
position:relative;
.SumoSelect.open > .optWrapper
top:0;
</style>
【讨论】:
以上是关于在引导模式中显示 sumoselect的主要内容,如果未能解决你的问题,请参考以下文章