Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
-6
rated 0 times [  1] [ 7]  / answers: 1 / hits: 14330  / 10 Years ago, sat, march 8, 2014, 12:00:00

How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that's part of an input group, the joined text area and submit button stop being joined. Is this something that's just a bug in Typeahead, or is there a workaround for this?



Without loading Typeahead.JS:



enter



With Typeahead.JS:



enter



My original HTML:



    <div class=col-sm-4 hidden-xs>
<form class=navbar-form role=search>
<div class=input-group>
<input type=text id=tags class=form-control name=q>
<div class=input-group-btn>
<button class=btn btn-default type=submit>Search</button>
</div>
</div>
</form>
</div>


This is what Typeahead does to this HTML:



<div class=col-sm-4 hidden-xs>
<form class=navbar-form role=search>
<div class=input-group>
<span class=twitter-typeahead style=position: relative; display: inline-block;>
<input type=text class=form-control tt-hint disabled= autocomplete=off spellcheck=false style=position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;>
<input type=text id=tags class=form-control tt-input name=q autocomplete=off spellcheck=false dir=auto style=position: relative; vertical-align: top; background-color: transparent;>
<pre aria-hidden=true style=position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;>
</pre>
<span class=tt-dropdown-menu style=position: absolute; top: 100%; left: 0px; z-index: 100; display: none;><div class=tt-dataset-0></div>
</span>
</span>
<div class=input-group-btn>
<button class=btn btn-default type=submit>Search</button>
</div>
</div>
</form>
</div>

More From » html

 Answers
3

This project partially solved the issue for me: https://github.com/hyspace/typeahead.js-bootstrap3.less



The only outstanding problem is when I apply shadow effect to both the .btn and .form-control the shadow is drawn also between the input field and the button.



enter


[#47038] Friday, March 7, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
pierce

Total Points: 315
Total Questions: 103
Total Answers: 89

Location: Svalbard and Jan Mayen
Member since Mon, Jun 7, 2021
3 Years ago
;