meteor - Bootstrap dropdown not working with input-group -


i'm trying make dropdown input use search box. want work stack overflow tag box. search users, pops suggestions, click on one, populates choice , activates button can use cancel choice , start process on again.

everything's working pretty okay, except when added button in bootstrap input group, dropdown box stopped dropping down. doesn't display now.

here's html:

<div class="row">     <div class="col-xs-6">          <div class="dropdown">              <div class="input-group">                 <input class="entryinput form-control" id="query" name="query" type="text" data-toggle="dropdown" {{#if session "querypopulated"}}readonly{{/if}}/>                 <span class="input-group-btn">                     <button id="cancelquery" class="btn btn-default" type="button"                     {{#unless session "querypopulated"}}disabled{{/unless}}>x</button>                 </span>             </div>              <ul class="dropdown-menu" role="menu" aria-labelledby="query">                 {{#each queryresults}}                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>                 {{/each}}             </ul>          </div>     </div>      <div class="col-xs-6">         ...     </div> </div> 

is there option can set link 2 again? behavior worked fine (well, fine, check out my other question see why isn't perfect) until put things in input group. can't do? getting greedy?

thanks in advance!

instead of setting attribute data-toggle on input, should set on input-group.

it works on bootply : http://www.bootply.com/120440

code

<div class="row">     <div class="col-xs-6">          <div class="dropdown">             <div class="input-group" data-toggle="dropdown">                 <input class="entryinput form-control" id="query" name="query" type="text"/>                 <span class="input-group-btn">                     <button id="cancelquery" class="btn btn-default" type="button">x</button>                 </span>             </div>              <ul class="dropdown-menu" role="menu" aria-labelledby="query">                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>                     <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>             </ul>          </div>     </div>      <div class="col-xs-6">         ...     </div> </div>  

Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -