bootstrap input in navbar with selectize.js not expanding

Question

I am trying to make the selectize.js input in the navbar bigger, but the selectize's css is applied and it ignores input-large classes. I tried to set even manually the style width for the element but it gets overwritten.

navbar and buttons are standard bootstrap:

<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 -->

then I just fire up selectize.js :

    $(document).ready(function(){
   $('#searchBox').selectize({
            valueField: 'tagName',
            labelField: 'tagName',
            searchField: 'tagName',
            maxItems: 1,
   load: function(query, callback) {                                 }});
});

A problem that the input shows higher than the button was fixed by commenting out the overflow as suggested in selectize's github as follows:

    .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;
}

but I am not sure what property I should change to make the input bigger.

you can take a look at the jsfiddle here: http://jsfiddle.net/arisalexis/rncujmnk/

Sebsemillia Sebsemillia · Accepted Answer · 2015-02-25T13:34:32

If I understand you correctly, you want to increase the width of the searchbox input.

The input you see is created by the selectize.js . You therefore can't control the size by adding classes to you input in your html. Instead you have to target the dynamically added input via CSS like this:

.selectize-control.single .selectize-input input {
    width: 150px!important;
}

You need to use the !important to overwrite the width added via the script. Adjust the width according to your needs.

Working Example

bootstrap input in navbar with selectize.js not expanding

1 Answers