title: Why width:100% doesn't work in typahead input?
body: <p>I have included typeahead.js library into my source code to do suggestion task while user type a word inside input form.
  But unfortunately the input width cannot be enlarged with %.
  This is my code.</p>
  
  <p>Js libraries:</p>
  
  <pre><code>    &lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.alerts.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="ckeditor/ckeditor.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="ckfinder/ckfinder.js"&gt;&lt;/script&gt;
      &lt;script src="js/googleapis_jquery_min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-ui.min-1.11.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script src="js/typeahead.min.js"&gt;&lt;/script&gt;&lt;!-- TYPEAHEAD LIBRARY--&gt;
      &lt;script src="js/select2.min.js"&gt;&lt;/script&gt;&lt;!-- SELECT2 --&gt;
      &lt;script type="text/javascript" src="js/jquery.alphanum-master/jquery.alphanum.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;FANCYBOX&gt; --&gt;
      &lt;!-- Add mousewheel plugin (this is optional) --&gt;
      &lt;script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"&gt;&lt;/script&gt;
      &lt;!-- Add fancyBox --&gt;
      &lt;script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
      &lt;!-- Optionally add helpers - button, thumbnail and/or media --&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"&gt;&lt;/script&gt;
      &lt;!-- &lt;/FANCYBOX&gt; --&gt;
      &lt;!-- &lt;MENUBAR&gt; --&gt;
      &lt;script type="text/javascript" src="js/menubar.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Typeahead JQuery:</p>
  
  <pre><code> // FORM PENCARIAN SKPD PENGIRIM USULAN PENGANGKATAN JFT Karier
    $('input.typeahead').typeahead({
         name: 'typeahead',
         remote:'ajax/skpd_pengirim_typeahead.php?key=%QUERY',
         limit : 10
     });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="panelcontainer" style="width: 100%;"&gt;   
    &lt;div class="bodypanel" id="bodyfilter"&gt;
      &lt;table border="0px" cellspacing='0' cellpadding='0' width='100%'&gt;
         &lt;tr&gt;
            &lt;td&gt;SKPD&lt;/td&gt;
            &lt;td width='10px'&gt;:&lt;/td&gt;
            &lt;td&gt;
                &lt;input type="text" name="typeahead" id="typeahead" class="typeahead tt-query" spellcheck="false" placeholder=". : Ketik SKPD : ."&gt;
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*costumizing form input of typeahead*/
      input.typeahead{
          width: 100% !important;
      }
  </code></pre>
  
  <p>While the form input can be enlarged with px.</p>
  
  <p>Why is this happenning ?</p>
  
  <p>And how does to fix this ?</p>
  
  <p><a href="https://i.stack.imgur.com/TAC3Z.png" rel="nofollow noreferrer">typeahead form input</a></p>
  
  <p>Please help My Brothers/Sisters.</p>
  
  <p>**UPDATED : **</p>
  
  <p>My typeahead.js was coming from this:
  <a href="https://github.com/codeforgeek/ajax-box-php/archive/master.zip" rel="nofollow noreferrer">master.zip</a>.</p>