Skip to content

Instantly share code, notes, and snippets.

@mikeblum
Created January 8, 2015 16:25
Show Gist options
  • Save mikeblum/78bafef28911178087e3 to your computer and use it in GitHub Desktop.
Save mikeblum/78bafef28911178087e3 to your computer and use it in GitHub Desktop.
Twitter Typeahead Styling Template
div.typeahead-dropdown{
padding-top: 0px;
padding-bottom: 0px;
width: 100%;
background-color: #fff;
}
.form-horizontal > .typeahead-group{
margin-right: 0px;
margin-left: 0px;
}
.typeahead-input, .tt-input{
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
min-height: 34px !important;
max-height: 34px !important;
height: 34px !important;
}
/* Fix for typeahead.js and bootstrap 3*/
.twitter-typeahead .tt-hint {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.twitter-typeahead {
width: 100%;
}
.tt-dropdown-menu {
width: 100%;
}
.tt-hint {
width: 100%;
font-size: 18px;
line-height: 1.33;
}
.tt-dropdown-menu {
max-height: 150px;
overflow-y: auto;
}
.btn-typeahead{
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important
}
.typeahead-result{
background-color: transparent !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
div.tt-suggestion{
background-color: #fff;
}
div.tt-suggestion.tt-cursor, div.tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion.tt-cursor{
/** stole list-group-item's styling for consistancy **/
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}
span.twitter-typeahead {
width: 100%;
}
.input-group span.twitter-typeahead {
display: block !important;
}
.input-group span.twitter-typeahead .tt-dropdown-menu {
top: 32px !important;
}
.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
top: 44px !important;
}
.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
top: 28px !important;
}
@nateplusplus
Copy link

Thank you for this!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment