jquery - 为什么宽度为 :100% doesn't work in typahead input?

Question

我已将 typeahead.js 库包含到我的源代码中，以在用户在输入表单中键入单词时执行建议任务。 但不幸的是输入宽度不能用 % 放大。 这是我的代码。

Js 库:

    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.alerts.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
    <script src="js/googleapis_jquery_min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min-1.11.1.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <script src="js/typeahead.min.js"></script><!-- TYPEAHEAD LIBRARY-->
    <script src="js/select2.min.js"></script><!-- SELECT2 -->
    <script type="text/javascript" src="js/jquery.alphanum-master/jquery.alphanum.js"></script>
    <!-- <FANCYBOX> -->
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
    <!-- Add fancyBox -->
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    <!-- </FANCYBOX> -->
    <!-- <MENUBAR> -->
    <script type="text/javascript" src="js/menubar.js"></script>

提前输入 JQuery:

 // FORM PENCARIAN SKPD PENGIRIM USULAN PENGANGKATAN JFT Karier
  $('input.typeahead').typeahead({
       name: 'typeahead',
       remote:'ajax/skpd_pengirim_typeahead.php?key=%QUERY',
       limit : 10
   });

HTML:

<div class="panelcontainer" style="width: 100%;">   
  <div class="bodypanel" id="bodyfilter">
    <table border="0px" cellspacing='0' cellpadding='0' width='100%'>
       <tr>
          <td>SKPD</td>
          <td width='10px'>:</td>
          <td>
              <input type="text" name="typeahead" id="typeahead" class="typeahead tt-query" spellcheck="false" placeholder=". : Ketik SKPD : .">
          </td>
       </tr>
    </table>
  </div>
</div>

CSS:

/*costumizing form input of typeahead*/
    input.typeahead{
        width: 100% !important;
    }

而表单输入可以放大px。

为什么会这样？

如何解决这个问题？

typeahead form input

请帮助我的 sibling 。

**更新:**

我的 typeahead.js 来自于: master.zip .

Answer 1

包装你的 <tr>在<table>正如@Ultimater 所建议的，并给表格一个宽度。

/*costumizing form input of typeahead*/

input.typeahead {
  width: 100% !important;
}

table {
  width: 100%;
}

<div class="panelcontainer" style="width: 100%;">
  <div class="bodypanel" id="bodyfilter">
    <table>
      <tr>
        <td>SKPD</td>
        <td width='10px'>:</td>
        <td>
          <input type="text" name="typeahead" id="typeahead" class="typeahead tt-query" spellcheck="false" placeholder=". : Ketik SKPD : .">
        </td>
      </tr>
    </table>
  </div>
</div>