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
Post a Comment