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({ ... 

enter image description here enter image description here

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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -