-
-
Save bhays/6140058 to your computer and use it in GitHub Desktop.
.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; | |
} |
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!
Thanks @mkli90 - this is a usable version: https://gist.github.com/joelhaasnoot/c7f3358726c22d489566
Congrats! Very helpful...
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;
}
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.
I had to change tt-dropdown-menu to tt-menu and tt-is-under-cursor to tt-cursor