CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user3255148
user3255148

Reputation: 23

Full width input group on bootstrap 3.1.0 navbar

I've got some troubles with bootstrap v3.1.0. I need to get search bar that will fit entire width of the navbar like this (v3.0.3): http://bootply.com/109727 But it feels like there is some troubles with input group and I am getting that (v3.1.0): http://bootply.com/109728 Any ideas how to fix that? Or is there another way to get same result?

<form class="navbar-form">
    <div class="form-group" style="display:inline;">
        <div class="input-group">
            <input class="form-control" type="text">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
        </div>
    </div>
</form>

Upvotes: 2

Views: 8854

Answers (2)

CidBYWI
CidBYWI

Reputation: 11

For Bootstrap 3.3.6, I solved it by using:

.navbar-form .input-group .input-group-btn {
    width: 1%;
}

Upvotes: 1

Schmalzy
Schmalzy

Reputation: 17324

This issue is the width:auto on .navbar-form .form-control. You can override this with width: 100% and it should work...

From the 3.1 Docs...

As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

Bootstrap 3.1

.navbar-form .form-control {
    display: inline-block;
    width: auto; /*This is the issue*/
    vertical-align: middle;
}

Bootstrap 3.0.3

.navbar-form .form-control {
    display: inline-block;
}

Upvotes: 4

Related Questions