title: Bootstrap Typeahead width with long text
body: <p>I have 4 inputs which are in <code>.col-md-3</code> as follows:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
          &lt;input id="input1" type="text"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;input id="input2" type="text"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;input id="input3" type="text"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;input id="input4" type="text"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using the <a href="http://plugins.upbootstrap.com/bootstrap-ajax-typeahead/" rel="nofollow noreferrer">Typeahead plugin</a>. My js works such that Typeahead only works on <code>#input3</code>:</p>
  
  <pre><code>$('#input3').typeahead({
        ajax: '/getdata.php'
  });
  </code></pre>
  
  <p>Some of the text which is being returned is very long (e.g. over 300 characters). The problem with this is that it doesn't fit into the Typeahead dropdown box. It "overlaps" the outside of the box like this:</p>
  
  <p><a href="https://i.stack.imgur.com/GR8kz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GR8kz.png" alt="enter image description here"></a></p>
  
  <p>I've read <a href="https://stackoverflow.com/questions/17957513/extending-the-width-of-bootstrap-typeahead-to-match-input-field">extending the width of bootstrap typeahead to match input field</a> but none of these fix it for me. I'm wondering if they're deprecated solutions.</p>
  
  <p><code>Bootstrap</code> version is <strong>3.3.7</strong></p>