Typeahead.js interferes with Bootstrap input groups
Solution 1
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.
Solution 2
.twitter-typeahead{ float:left; width:100%}
Solution 3
Bootstrap v4 solution:
.input-group > .twitter-typeahead {
flex: 1 1 auto;
width: auto;
}
Solution 4
maybe?
.twitter-typeahead > .form-control{
width: inherit !important;
}
Solution 5
This fixes the problem when the left-hand side of the text box is square (not rounded):
.input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) {
border-radius: 4px 0px 0px 4px;
}
Related videos on Youtube
caitlin
Full-stack developer, currently working in PHP and TypeScript and learning Dart!
Updated on September 15, 2022Comments
-
caitlin over 1 year
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:
With Typeahead.JS:
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>
-
Audrius Kažukauskas about 10 yearsNot sure if this would help, but there's a project which provides Bootstrap style for typeahead.js (both Less and CSS). You might want to try it.
-
xCNPx almost 10 yearsI've got the same issue! Have you made any progress on this?
-
daniel.sedlacek almost 10 yearsthe project mentioned above partially helped to me.
-
-
caitlin about 9 yearsThis answer is incorrect and should not be upvoted. This squishes them closer together, but it doesn't join them and it doesn't do anything about the left-hand side of the text box being square.
-
caitlin about 9 yearsMy workflow doesn't use less so this doesn't really work for me.
-
daniel.sedlacek about 9 years@schnauss Neither does mine, the solution is not dependent on less.
-
Gellweiler about 9 yearsWorks great, but one thing that is missing is:
.twitter-typeahead > .form-control{ width: inherit !important; }
. Add that to adjust the width of the input fields. -
Nico de Wet over 8 yearsSimply incorporated typeahead.css (version 0.2.3) from the cited github page, added the link and typeahead (version 0.11.1) is working just fine.
-
Jon almost 5 yearsThis worked for me, thanks. Though I didn't need the width: auto rule for my version, presumably due to using the css for other BS4 changes for it from here github.com/bassjobsen/typeahead.js-bootstrap4-css
-
Displee over 3 yearsAlmost perfect. Add this to remove the input radius at the left:
.input-group>.twitter-typeahead > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
-
Tegge over 2 yearsThis solution helped me solve the exact same problem for a blazored-typeahead component with bootstrap v5.