导航栏中的bootstrap输入,selectize.js未展开
bootstrap input in navbar with selectize.js not expanding
我试图让导航栏中的selectize.js输入更大,但selectize的css被应用,它忽略了输入的大类。我甚至试图手动设置元素的样式宽度,但它被覆盖了。
导航栏和按钮是标准的引导程序:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#profile">Home</a></li>
<li><a href="#browse">Browse</a></li>
<li id="friendRequests" class="dropdown"><a id="anw" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-smile-o fa-lg"></i>
</a>
<ul class="dropdown-menu">
</ul>
</li>
<li><a id ="messagesLink" href="#messages"><i class="fa fa-envelope-o fa-lg"></i>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" id="searchBox" class="" placeholder="search">
</div>
<button type="submit" id="searchButton" class="btn btn-default color3">Go</button>
</form>
<img src="" class="img-responsive navbar-brand">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a >Settings</a></li>
<li class="divider"></li>
<li><a href="#logout">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
然后我启动selectize.js:
$(document).ready(function(){
$('#searchBox').selectize({
valueField: 'tagName',
labelField: 'tagName',
searchField: 'tagName',
maxItems: 1,
load: function(query, callback) { }});
});
通过注释掉selectize的github中建议的溢出,解决了输入显示高于按钮的问题,如下所示:
.selectize-input {
border: 1px solid #cccccc;
padding: 6px 12px;
display: inline-block;
width: 100%;
/* overflow: hidden;*/
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
但我不确定应该更改什么属性以使输入更大。
您可以在这里查看jsfiddle:http://jsfiddle.net/arisalexis/rncujmnk/
如果我理解正确,您希望增加搜索框输入的宽度。
您看到的输入是由selectize.js创建的。因此,您无法通过向html中的输入添加类来控制大小。相反,您必须通过如下CSS来针对动态添加的输入:
.selectize-control.single .selectize-input input {
width: 150px!important;
}
您需要使用!important
来覆盖通过脚本添加的宽度。根据您的需要调整width
。
工作示例
相关文章:
- Selectize.js:如何对整数值的选项进行排序
- Javascript键代码捕获非拉丁字符?(还需要在selectize.js中工作)
- Selectize.js:如何将数据库中已经选择的标签预加载到输入字段(Meteor&MongoDB/JSON)
- 如何使用selectize.js将数组值设置到文本字段中
- 如何使用 selectize js 从选择框中获取数据值
- 在Selectize.js下拉列表中的附加按钮上添加点击事件
- 导航栏中的bootstrap输入,selectize.js未展开
- 为selectize.js选项添加数据属性
- Selectize.js手动添加一些项目
- Selectize.js Diacritics不适用于一个角色
- jquery-selectize.js更改了下拉列表标识问题
- Selectize.js-强制从选择中至少选择一个要拾取的项
- selectize.js没有'无法使用远程url
- 正在销毁Selectize.js实例
- 如何在selectize.js中设置默认值
- 搜索未检测到结果返回-Selectize.js
- 将selectize.js与远程源代码一起使用
- 如何在文档准备好后自动将项目添加到selectize js中
- 如何获取当前选中的Selectize.js输入项的值
- 计算selectize.js中的选项个数