CODEWITHSUNDEEP
twitter-bootstrapnavbar
Samed
Samed

Reputation: 136

Twitter Bootstrap input-group issue

<form class="navbar-form nav-search form-inline" role="form">
   <div class="form-group">
      <div class="input-group">
         <input type="search" class="form-control input-sm input-search" id="filter-input" placeholder="Type to filter..">
          <span class="input-group-btn">
              <button class="btn btn-default btn-sm" type="button">x</button>
          </span>
        </div>
      </div>
  <button type="submit" class="btn btn-primary btn-sm btn-search">Search</button>
</form>

http://jsfiddle.net/XfzFQ/22/

When i use input-group, it is going crazy. I cannot find a solution. Help me!

Upvotes: 1

Views: 836

Answers (2)

Samed
Samed

Reputation: 136

It is an issue at bootstrap also. github.com/twbs/bootstrap/issues/9950 Solution is hacking the bootstrap with giving to form-group style="width:200px". jsfiddle.net/9Z4MN/3

Upvotes: 0

trevor
trevor

Reputation: 2300

I found the best solution was to correct this within a media query for mobile devices. This gave me the desired effect on desktops, and 100% width on tablets/phones:

@media screen and (min-width: 768px) {
    .form-group {
        width: 200px;
    }
}

Upvotes: 2

Related Questions