Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 3 style fixes for using Typeahead.js
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-hint {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #999;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #428bca;
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
@azolynsky

This comment has been minimized.

Copy link

commented Oct 1, 2013

dude you are a genius thank you

@jimbocooper

This comment has been minimized.

Copy link

commented Oct 25, 2013

Genius indeed, thanks! :)

@GaliNovikova

This comment has been minimized.

Copy link

commented Nov 9, 2013

Thank you very very much! Looks great!
But I should change top-padding in line 9 to 4px and bottom padding to 8px to make text appear on the similar line

@phax

This comment has been minimized.

Copy link

commented Nov 18, 2013

Yeah - definitively of great help. Alternatively you may change line 8 from "height: 38px;" to "height: 34px;" so that elements have the same height (especially for colored background)

@sc0tt

This comment has been minimized.

Copy link

commented Nov 20, 2013

Worked great for me. Thank you!

@mzahor

This comment has been minimized.

Copy link

commented Dec 6, 2013

Worked for me as well. Thank you very much!!!

@lee101

This comment has been minimized.

Copy link

commented Jan 16, 2014

Thank you so much worked for me too!!

@cheshireoctopus

This comment has been minimized.

Copy link

commented May 1, 2014

What everyone else said:

  • "you're a genius"
  • "definitely of great help"
  • "thank you so much worked for me too!"

I owe you a beer.

@liupangzi

This comment has been minimized.

Copy link

commented Jun 26, 2014

works for me, thanks dude.

@traut

This comment has been minimized.

Copy link

commented Aug 7, 2014

worked for me except the name "tt-is-under-cursor" is now "tt-cursor"

@mahmoudilyan

This comment has been minimized.

Copy link

commented Aug 26, 2014

thanks a lot

@dupush

This comment has been minimized.

Copy link

commented May 3, 2015

It works! Thanks.

@tomwilsn

This comment has been minimized.

Copy link

commented Jun 5, 2015

I had to change tt-dropdown-menu to tt-menu and tt-is-under-cursor to tt-cursor

@macskay

This comment has been minimized.

Copy link

commented Aug 27, 2015

Awesome! But there are some minor changes since for the last version of typeahead.
I've forked a version of yours and changed some of the stuff. https://gist.github.com/mkli90/0859df40b3075c2df8c3.js. Feel free to use them. What has changed? ..tt-suggestoin.tt-under-cursor is now tt-suggestion:hover and .tt-dropdown-menu is now .tt-menu. Other than that great work!

@joelhaasnoot

This comment has been minimized.

Copy link

commented Sep 26, 2015

Thanks @mkli90 - this is a usable version: https://gist.github.com/joelhaasnoot/c7f3358726c22d489566

@vander911

This comment has been minimized.

Copy link

commented Jun 6, 2016

Congrats! Very helpful...

@UmilaHeshan

This comment has been minimized.

Copy link

commented Nov 23, 2017

its working and thanks.if u want to get full size for text field try this # width: 100%;

.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer;
border-radius: 4px;
width: 100%;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;

    }
@AntMooreWebDev

This comment has been minimized.

Copy link

commented Nov 29, 2017

Awesome work dude, I had to make some tweaks to get it to work with my version of typeahead (0.11.1) (credit to @kabal for initial pointers), and I created a fork here: https://gist.github.com/AntMooreWebDev/2f7e423a11bc74359323995df4494167.

I also amended the styling so that the suggested options span the width of the menu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.