javascript - Bootstrap: using typeahead with grid, is this a bug? -
i using bootstrap grid form. form has in grid grid changes after selecting typeahead. bug?
http://jsfiddle.net/wcqkp/ (must resize html section wide see grid)
$(document).ready(function () { ... $('#inputemail').typeahead({ ...
this happens because of this:
.controls-row [class*="span"]+[class*="span"] { margin-left: 20px; }
this property applied if element class containing word span
preceded element containing same word , being inside object controls-row
class.
(http://www.w3.org/tr/css21/selector.html#adjacent-selectors)
this works when load page:
<div class="controls controls-row"> <input type="text" name="email" id="inputemail" placeholder="email" class="span3"> <input type="password" name="password" id="inputemail" placeholder="password" class="span2"> </div>
but trigger typeahead, new html element added:
<div class="controls controls-row"> <input type="text" name="email" id="inputemail" placeholder="email" class="span3"> <ul class="typeahead dropdown-menu" style="top: 90px; left: 210px; display: none;"> <li data-value="gmail.com" class="active"><a href="#">gmail.com</a></li> </ul> <input type="password" name="password" id="inputemail" placeholder="password" class="span2"> </div> </div>
you fix adding in css like:
@media (min-width: 768px) { #inputpassword { margin-left: 20px; } }
see working example: http://jsfiddle.net/wcqkp/2/
note: changed id password input inputemail
inputpassword
Comments
Post a Comment