Issue with forms using twitter typeahead and bootstrap3

Question

I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:

-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form . I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.

-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form . I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.

See code below:

<div class="jumbotron text-center" id="main">
  <div class="container-fluid">
    <div class="row">
      <div class="cl-md-12" id="box">
        <div class="well well-lg" id="well-form">
          <form role="form" class="form-inline" > 
            <div class="container">
              <div class="row">
                <div class="col-sm-3" id="field1">
                  <div class="form-group">
                    <label class="sr-only" for="orig">Origin city or airport</label>
                    <input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
                  </div>
                </div>
                <div class="col-sm-1" id="field2">
                   <a href="#"><span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span></a>
                </div>
                <div class="col-sm-3" id="field3">
                  <div class="form-group">
                    <label class="sr-only" for="dest">Destination city or airport</label>
                    <input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
                  </div>
                </div>
                <div class="col-sm-2" id="field4">
                  <div class="form-group">
                    <label class="sr-only" for="date_out">Date out</label>
                    <input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
                  </div>
                </div>
                <div class="col-sm-2" id="field5">
                  <div class="form-group">
                    <label class="sr-only" for="date_in">Date in</label>
                    <input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
                  </div>
                </div>
                <div class="col-sm-1" id="field6">
                  <button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.jumbotron {
    color: #ffffff;
    padding: 80px 25px 200px;
    margin-top: 0px;
}
.form-inline > * {
    display: inline-block;
    justify-content: center;
}
#date_out, #date_in{
    background-color: #ffffff !important;
    width:100%;
}
#orig, #dest {
    background-color: #ffffff !important;
    max-width: 400px;
    width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
    padding: 1px;
    margin: 0;
}

Any help would be much appreciated :)

Thanks in advance

Answer 1

As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)

 .jumbotron { color: #ffffff; padding: 80px 25px 200px; margin-top: 0px; } .form-inline > * { display: inline-block; justify-content: center; } #date_out, #date_in{ background-color: #ffffff !important; width:100%; } #orig, #dest { background-color: #ffffff !important; max-width: 400px; width: 100%; } #field1, #field3, #field2, #field4, #field5, #field6{ padding: 1px; margin: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="jumbotron text-center" id="main"> <div class="container-fluid"> <div class="row"> <div class="cl-md-12" id="box"> <div class="well well-lg" id="well-form"> <form role="form" class="form-inline" > <div class="container"> <div class="row"> <div class="col-sm-3" id="field1"> <div class="form-group"> <label class="sr-only" for="orig">Origin city or airport</label> <input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value=""> </div> </div> <div class="col-sm-1" id="field2"> <a href="#"><span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span></a> </div> <div class="col-sm-3" id="field3"> <div class="form-group"> <label class="sr-only" for="dest">Destination city or airport</label> <input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination"> </div> </div> <div class="col-sm-2" id="field4"> <div class="form-group"> <label class="sr-only" for="date_out">Date out</label> <input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing"> </div> </div> <div class="col-sm-2" id="field5"> <div class="form-group"> <label class="sr-only" for="date_in">Date in</label> <input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning"> </div> </div> <div class="col-sm-1" id="field6"> <button type="submit" class="btn btn-danger btn-md" id="submit">Search</button> </div> </div> </div> </form> </div> </div> </div> </div> </div>