Has Anyone Else Run into Problems Styling Twitter Typeahead's Searchbar

Has anyone else run into problems styling Twitter Typeahead's searchbar?

The reason why your css is getting overridden is because Typeahead.js uses javascript to add the css and change the styling. Since all that happens after your css is loaded to the page, it takes precedence and messed up what you already did.

I noticed your are using Bootstrap. Check this issue that was opened https://github.com/twitter/typeahead.js/issues/378 a while back that helps you go into styling typeahead while using a bootstrap framework. Jharding (the one maintaining typeahead) does mention something interesting in that link though:

Someone asks:
"@jharding If you have no interest in writing “an official Bootstrap
library” how about re-factoring it so the CSS is actually controllable
by users without resorting to using the !important keyword, and let
them decide if they want Bootstrap styles or not."

@jharding: Will be possible in v0.11.

So it looks like you'll have to wait for a newer version of Typeaway to more freely style it.

custom progress bar modification challenge

You can start with this code:

a {  color: #fff;}.custom-progress-bar ul li span {    width: 27px;    height: 27px;    background: #cbcbcb;    color:#fff;    display: block;    border-radius: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    text-align: center;        font-size: 18px;    line-height: 28px;}.custom-progress-bar ul {    list-style:none;}
.custom-progress-bar .last {width: 80px;border-radius: 20px;}
.custom-progress-bar ul li {  display: inline-block;  margin-left: 14px;  border-radius: 50%;  width: 27px;    height: 27px;}
.custom-progress-bar ul li::after {  display: block;  content: '';  height: 2px;  width: 20px;  margin-top: -14px;  margin-left: -20px;  background: #cbcbcb;}
.custom-progress-bar ul li:first-child::after {  display: none;}
.custom-progress-bar li.completed {  margin-right: 2px;  border: 4px solid #fff;  -webkit-box-shadow: 0px 0px 0px 2px rgba(156,198,86,1);  -moz-box-shadow: 0px 0px 0px 2px rgba(156,198,86,1);  box-shadow: 0px 0px 0px 2px rgba(156,198,86,1);}
.custom-progress-bar li.completed::after {     margin-left: -24px;}
.custom-progress-bar li.completed + li span {    background: #9cc656;}
.custom-progress-bar li.completed + li + li span {    background: #9cc656;}
.custom-progress-bar li.completed + li::after {    background: #9cc656;}
.custom-progress-bar li.completed + li + li::after {    background: #9cc656;}

<div class="custom-progress-bar">    <ul>        <li><span class="bubble"><a href="#">1</a></span></li>        <li><span class="bubble"><a href="#">2</a></span></li>        <li><span class="bubble"><a href="#">3</a></span></li>        <li class="completed"><span class="bubble"><a href="#">4</a></span></li>        <li><span class="bubble"><a href="#">5</a></span></li>        <li><span class="bubble last"><a href="#">finish</a></span></li>    </ul></div>

CSS - Getting undefined when using Typehead.js with Bootstrap 5

Managed to make it work, you just have to update your library to the last version available in the cdn, you're using version 0.10.3, it should be 0.11.3.

https://cdnjs.com/libraries/typeahead.js/0.11.1

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#searchField').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'states',
  source: substringMatcher(states)
});

span.twitter-typeahead .tt-menu {
  cursor: pointer;
}

.dropdown-menu,
span.twitter-typeahead .tt-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 1rem;
  color: #373a3c;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

span.twitter-typeahead .tt-suggestion {
  display: block;
  width: 100%;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
  text-align: inherit;
  white-space: nowrap;
  background: #fff;
  border: 0;
}

span.twitter-typeahead .tt-suggestion:focus,
.dropdown-item:hover,
span.twitter-typeahead .tt-suggestion:hover {
  color: #2b2d2f;
  text-decoration: none;
  background-color: #f5f5f5;
}

span.twitter-typeahead .active.tt-suggestion,
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .active.tt-suggestion:focus,
span.twitter-typeahead .tt-suggestion.tt-cursor:focus,
span.twitter-typeahead .active.tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
  color: #fff;
  text-decoration: none;
  background-color: #0275d8;
  outline: 0;
}

span.twitter-typeahead .disabled.tt-suggestion,
span.twitter-typeahead .disabled.tt-suggestion:focus,
span.twitter-typeahead .disabled.tt-suggestion:hover {
  color: #818a91;
}

span.twitter-typeahead .disabled.tt-suggestion:focus,
span.twitter-typeahead .disabled.tt-suggestion:hover {
  text-decoration: none;
  cursor: not-allowed;
  background-color: #fff;
  background-image: none;
  filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}

span.twitter-typeahead {
  width: 100%;
}

.input-group span.twitter-typeahead {
  display: block !important;
}

.input-group span.twitter-typeahead .tt-menu {
  top: 2.375rem !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/@tarekraafat/autocomplete.js@9.1.1/dist/css/autoComplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Updated the script below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js" integrity="sha512-qOBWNAMfkz+vXXgbh0Wz7qYSLZp6c14R0bZeVX2TdQxWpuKr6yHjBIM69fcF8Ve4GUX6B6AKRQJqiiAmwvmUmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<header class="p-3 bg-dark text-white">
  <div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">

      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="" class="nav-link px-2 text-secondary">Products</a></li>
      </ul>

      <form name="searchForm" id="searchForm" class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" method="POST" action="#">
        <input name="searchField" id="searchField" type="search" class="form-control form-control-dark typeahead" style="width: 426px; " placeholder="Search for news, symbols, tickers or companies">
      </form>
    </div>
  </div>
</header>

Twitter's typeahead.js suggestions are not styled (have no border, transparent background, etc.)

So looking into the docs I now see:

By default, the dropdown menu created by typeahead.js is going to look
ugly and you'll want to style it to ensure it fits into the theme of
your web page.

My solution was thus to copy the styling from the example I wished to replicate:

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

---

Related Topics