Пропозиції typeahead.js у Twitter не є стильовими (не мають рамки, прозорого фону тощо)


182

Я використовую twitter's typeahead.js 0.9.3, і, здається, мої пропозиції зовсім не стилізовані.

Я отримую це:

помилка

Замість чогось подібного: (взято зі сторінки прикладів )

Набір ідеалу

JavaScript увімкнення typeahead:

$('.search-typeahead').typeahead({
    name: 'videos',
    remote: {
        url: '/api/v1/internal/videos/typeahead?text=%QUERY'
    }
});

Елемент введення HTML:

<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>

Додаткові нотатки:

На сайті, над яким я працюю, є jQuery 1.10.1 і не використовується завантажувальна програма twitter. Існує купа CSS, яку я не писав, і тому я не знайомий, з яким я, боюся, втручається, однак, здається, плагін додає власні стилі (немає супровідного файлу .css), тому не повинен теоретично це переосмислювати речі ? Мене бентежить, чому мої стилі працюють, але ті, які додає плагін, не роблять, що призводить до пропозицій з прозорим фоном, без меж тощо.

Відповіді:


212

Отже, дивлячись на документи, я зараз бачу:

За замовчуванням випадаюче меню, створене typeahead.js, буде виглядати некрасиво, і ви захочете його створити так, щоб він відповідав темі вашої веб-сторінки.

Таким чином, моє рішення було скопіювати стилізацію з прикладу, який я хотів повторити:

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

19
Чомусь мою запропоновану редакцію відхилено, але зауважте, що tt-is-under-cursorклас, схоже, був перейменований у tt-cursor. Документація тут .
Джо Фріман

6
Є також tt-inputзамість tt-query(на 0.10.5)
Філіп Спірідонов

7
Хіба не було б краще мати в коментарях старі версії?
worldsayshi

3
.tt-спадне меню зараз .tt-menu
bkwdesign

1
Додати, cursor: pointer;щоб .tt-is-under-cursorмати відповідний курсор, який повідомляє користувачеві, що йому потрібно натиснути.
Лоран В.

124

Отже, наступні стилі нададуть тобі зовнішній вигляд. Він заснований на CSS, який я витягнув з офіційного веб-сайту прикладів Typeahead.

введіть тут опис зображення

CSS:

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

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

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

Це передбачає, що ваш вхід матиме form-controlклас. Для мого прикладу це так:

<input class="typeahead form-control" type="text" placeholder="States of USA">

4
Працював для мене одним твістом. З'являється .tt-dropdown-menuзараз .tt-menu. Дякую за відповідь
groundh0g

33

https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css

Інші не виглядали чудово, цей найбільше схожий на Bootstrap.


1
Чудово працює з Bootstrap
Jose Cherian

Це чудово спрацювало без змін у Rails 4.2 та bootstrap-sass (3.3.7) autoprefixer-rails (> = 5.2.1) sass (> = 3.3.4). Плюс це означає, що ваше вхідне поле може бути шириною 100%, тому воно має працювати з більшістю макетів.
rmcsharry

Хоча якщо введення ширше 162 (тут використовується мінімальна ширина), ви також можете додати ширину: 100%; до першого розділу для меню tt / tt-
dropdown

19

Typeahead змінив деякі назви класів, і наведені вище приклади є невірними.

Наприклад:

  • Замість .tt-suggestion.tt-is-under-cursor використання.tt-suggestion:hover
  • Замість того .tt-dropdown-menu, використання.tt-menu

Якщо ви хочете запозичити стиль на сторінці прикладів , ви можете переглянути їх таблицю стилів тут :

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

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

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

Ось демонстрація у "Сніппетах стека"


2
Чи можна не допустити, щоб шпилька зробила ширину такою маленькою?
Rune Jeppesen

13

Це код, який працює для мене:

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}
.tt-hint {
    display: block;
    width: 100%;
    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: #dfdfdf;
}
.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}
.tt-suggestion p {
    margin: 0;
}

1
Це рішення працює незалежно від ширини вводу. Дякую!
spaceuitdiver

Мені ідеально підходить для типу typeahead.js + BS3 + даних на одному екрані. Спасибі
Майк Кастро Демарія

3

Оскільки у мене менше середовища з включеним BS3, я взяв css-код Zugwalt (помістив його в більш читаючу ієрархію) і наповнив його стилем із спадного меню bs3. Це просто слідування вашим (налаштованим) змінним.

    .twitter-typeahead {
      display: block;
      width: 100%; //BS 3 needs this to inherit this for children

      .tt-query,
      .tt-hint {
        margin-bottom: 0;
      }

      .tt-dropdown-menu {
        z-index: @zindex-dropdown;
        min-width: 326px;
        padding: 5px 0;
        margin: 2px 0 0; // override default ul
        font-size: @font-size-base;
        text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
        background-color: @dropdown-bg;
        border: 1px solid @dropdown-fallback-border; // IE8 fallback
        border: 1px solid @dropdown-border;
        border-radius: @border-radius-base;
        .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
        background-clip: padding-box;

        .tt-suggestions {

          .tt-suggestion {
            padding: 3px 12px;
            font-weight: normal;
            line-height: @line-height-base;
            color: @dropdown-link-color;
            white-space: nowrap; // prevent links from randomly breaking onto new lines
          }

          .tt-suggestion.tt-cursor {
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
          }

          .tt-suggestion p {
            margin: 0;
          }
        }
      }
    }

1

Ось scssверсія, яка максимально покладається на змінні / декларації завантажувальної програми. На жаль, ви не можете розширити вкладені селектори в sass, інакше він буде меншим:

@mixin typeahead-active() {
  // mimics  @extend .dropdown-menu > .active > a;
  color: $dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: $dropdown-link-active-bg;
}

//https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
span.twitter-typeahead {

  // this is the suggested matches dropdown
  .tt-menu {
    @extend .dropdown-menu;
  }

  .tt-hint {
    color: #999
  }

  // Added to suggestion elements.
  .tt-suggestion {

    // mimic .dropdown-menu > li > a
    padding: 3px 20px;
    line-height: $line-height-base;

    // Added to suggestion element when menu cursor moves to said suggestion.
    &.tt-cursor {
      @include typeahead-active;
    }

    // Hover/focus on suggestion
    &:hover,
    &:focus {
      @include typeahead-active;
    }

    p {
      margin: 0;
    }
  }

  .input-group & {
    display: block !important;
    .tt-dropdown-menu {
      top: 32px !important;
    }
  }
  .input-group.input-group-lg & {
    .tt-dropdown-menu {
      top: 44px !important;
    }
  }
  .input-group.input-group-sm & {
    .tt-dropdown-menu {
      top: 28px !important;
    }
  }
}

1

Якщо ви використовуєте Bootstrap 4, для цього достатньо:

span.twitter-typeahead
  width: 100%

.tt-input
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)

.tt-menu
  @extend .list-group
  box-shadow: 0 5px 10px rgba(0,0,0,.2)
  width: 100%

.tt-suggestion
  @extend .list-group-item

.tt-selectable
  @extend .list-group-item-action

0

У моєму випадку абсолютне позиціонування вирішило це. Відносне позиціонування підштовхувало інші елементи завантажувальної програми, коли список пропозицій (tt-меню) був відкритим.

.tt-menu { 
    z-index: 2147483647;
    position: absolute;    
}

Ви можете додати це до вищевказаної відповіді https://stackoverflow.com/a/26934329/1225421

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.