CSS issue on Twitter Typeahead with Bootstrap 3

by

EDIT: Updated for Bootstrap 3.0
EDIT 2: Typeahead call was modified. See new jsfiddle

After playing around with the styling it looks like the form-control class doesn’t quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen’s answer and adding border-radius and support for input-small/input-large

CSS

.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;
}

Script for input-small/input-large

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

Updated jsfiddle: http://jsfiddle.net/KrtB5/542/

More Related Contents:

  1. How make my CSS responsive using Bootstrap 3.1
  2. Bootstrap 3 Collapse show state with Chevron icon
  3. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery [closed]
  4. How to make Bootstrap carousel slider use mobile left/right swipe
  5. Bootstrap Carousel showing next and previous image
  6. Typeahead problems with Bootstrap 3.0 RC1
  7. How to change the element of another div by clicking and hovering on an element of a different div
  8. Hide/Show div on specific page with jquery
  9. CSS block doesn’t show click on a button
  10. How to change color of SVG image using CSS (jQuery SVG image replacement)?
  11. Auto-size dynamic text to fill fixed size container
  12. Downloading jQuery UI CSS from Google’s CDN
  13. Create a CSS rule / class with jQuery at runtime
  14. Bootstrap 3: Keep selected tab on page refresh
  15. How do I get background image size in jQuery?
  16. Selecting elements with a certain background color
  17. Remove CSS from a Div using JQuery
  18. Correct way to animate box-shadow with jQuery
  19. Leaving out the last semicolon of a CSS block
  20. Add CSS to iFrame [duplicate]
  21. Bootstrap modal: background jumps to top on toggle
  22. jQuery check if element has a specific style property defined inline
  23. How do you create a toggle button?
  24. position fixed header in html
  25. How to remove only one style property with jQuery?
  26. CSS3 equivalent to jQuery slideUp and slideDown?
  27. How add spaces between Slick carousel item
  28. Fading elements in and out without changing the layout of the page
  29. Custom CSS to allow chrome textarea resize smaller than initial state?
  30. What is alternative to use after jQuery 1.9 removed .toggle(function,function)?

Leave a Comment