CODEWITHSUNDEEP
twitter-bootstrap
hXJaXNJxPrYRBxXiCzWc
hXJaXNJxPrYRBxXiCzWc

Reputation: 439

Bootstrap Search bar transition not working correctly

I'm trying to get a nice transition effect for my search bar, however every transition starts and ends from a 0px width state for some reason. Does anyone know what could cause this? Thank you.

this is the code:

CSS

#searchBox {
    border-radius: 15px;
    -webkit-transition: width .30s ease-in;
    transition: width .30s ease-in;
}

#searchBox:focus {
    width: 300px;
    -webkit-transition: width .30s ease-out;
    transition: width .30s ease-out;
}

HTML

    <nav class="navbar navbar-default" 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="#bs-example-navbar-collapse-1">
            <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="/home"><img src="/images/logo.png" width="35px"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/home"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">New <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">New Tour</a></li>
                <li class="divider"></li>
                <li><a href="#">New Guide</a></li>
                <li><a href="#">New Hotel</a></li>
                <li><a href="#">New Restaurant</a></li>
                <li><a href="#">New Attraction</a></li>
                <li class="divider"></li>
                <li><a href="#">Something else</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Tours</a></li>
                <li class="divider"></li>
                <li><a href="#">Guides</a></li>
                <li><a href="#">Hotels</a></li>
                <li><a href="#">Restaurants</a></li>
                <li><a href="#">Attractions</a></li>
                <li class="divider"></li>
                <li><a href="#">Something else</a></li>
              </ul>
            </li>
          </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="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{user.name}} <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Account</a></li>
                <li class="divider"></li>
                <li><a href="#">My Tours</a></li>
                <li class="divider"></li>
                <li><a href="/logout">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

Upvotes: 1

Views: 1066

Answers (1)

Mo.
Mo.

Reputation: 27465

#searchBox didn't mentioned its width. Try the code below

#searchBox {
  width: 175px;
    border-radius: 15px;
    -webkit-transition: width 0.30s linear 0s;
       -moz-transition: width 0.30s linear 0s;
        -ms-transition: width 0.30s linear 0s;
         -o-transition: width 0.30s linear 0s;
            transition: width 0.30s linear 0s;
}
#searchBox:focus {
    width: 300px;
}

DEMO http://www.bootply.com/118100

Upvotes: 1

Related Questions