Bootstrap and search input width change on focus - css

Question

I am using bootstrap 3 to create my nav bar. I also needed to place a search bar on the navbar. So my code looks like this
<div class="navbar navbar-default">
<a class="navbar-brand">Logo Image</a>
<ul class="nav navbar-nav">
<li class="active">Calendar</li>
<li>Customerr</li>
<li>Providers</li>
</ul>
<form class="navbar-form navbar-right" action="">
<div class="form-group">
<input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
</div>
<input type="submit" name="search" value="Search" class="btn btn-default" >
</form>
</div>
I want the input box to get bigger when the usere focuses to search but to the left like stack's search bar. I tried the following css at first
.mac-style:focus{
width: 500px;
}
and the input box grows to the left but the transition is very rough. So i tried to add the transition property(webkit moz o an default) like this
.mac-style:focus{
width: 500px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
but the input changes width to the right going behind the search button and off the nav-bar. Ho can i make it act like the css without the transition(grow to the left). The way my nav bar is created, is there a way to make it stop when it reaches the last li so it is more dynamic?

Answer 1

If i correctly understand you - take a this fiddle . I don't know yours other css styles, but you can a create your fiddle and show it to us.

Answer 2

The reason is, you should give width to normal state also.
JSFIDDLE : http://jsfiddle.net/surjithctly/mdXqr/
.mac-style {
width: 100px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.mac-style:focus{
width: 260px;
}