[英]Multiple options select with chosen-js
I'm trying to create a multiple option selector using chosen-js . 我正在尝试使用selected-js创建一个多选项选择器。
This codepen, shows what I'm trying and how it's different from what I'm expecting (eg this jsfiddle example ). 该 Codepen展示了我正在尝试的内容以及与期望的内容有何不同(例如jsfiddle示例 )。 The below snippets highlight the relevant html and js. 以下代码片段突出显示了相关的html和js。 I'm nesting the <select>
tags within a bootstrap4 container
and col-12
: 我将<select>
标记嵌套在bootstrap4 container
和col-12
:
index.html 的index.html
<div class="container">
<div class="row" style="height: 100vh;">
<div class="col-12 mt-4 mb-4 h-100" id="test">
<div class="mt-4 header">
<p>Choose some games!</p>
</div>
<select id="mySelectId" data-placeholder="Add skills..." class="chosen-select" multiple="multiple">
<option value="Chess">Chess</option>
<option value="Monopoly">Monopoly</option>
<option value="Cards">Cards</option>
<option value="Cluedo">Cluedo</option>
<option value="Snap">Snap</option>
</select>
</div>
</div>
</div>
choose.js choose.js
$(".chosen-select").chosen({width: "50%"});
While it is working to some extent - see pen - the behaviour is not as expected: 当它在某种程度上起作用时( 请参阅pen) ,其行为与预期不符:
Am I doing something obviously wrong? 我做错了什么吗?
I checked your fiddle saw a style 我检查了你的小提琴看到了一种风格
.center_v a, h1, p, ul {
position:relative;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
In that style, the transform property was the reason for your problem. 在这种样式中,transform属性是导致问题的原因。 try to add your own class rather than giving styles directly to tags like p ul.. etc 尝试添加自己的类,而不是直接给标签等样式赋予样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.