typeahead. js не могу найти стиль для его изменения ИЛИ я могу переопределить стиль html элементов из css? - PullRequest
Новая
       22

typeahead. js не могу найти стиль для его изменения ИЛИ я могу переопределить стиль html элементов из css?

1 голос
/ 27 марта 2020

typeahead. js - это один файл, но по какой-то причине он добавляет html элементов, которые имеют атрибуты 'style', и я пытаюсь исправить z-индекс, но он определен в сгенерированном элементе с опережением типа. Я не вижу стиля, определенного в typeahead. js хотя. Как переопределить эту выделенную вещь, чтобы она была z-index = 9999999, так как некоторые элементы в этой теме 99999 (раздражает)

enter image description here

Мы пытаемся переместить меню над некоторыми кнопками, но я не знаю, как изменить сгенерированный typeahead html. Почему они не используют css здесь с файлом typeahead. css? Это кажется странным.

спасибо, Дин

Нашел в этом проекте (https://github.com/corejavascript/typeahead.js) форк и обновление до 1.3.1 имеет ту же проблему

enter image description here

1 Ответ

1 голос
/ 29 марта 2020

Существуют некоторые встроенные имена классов (недокументированные, если я помню), которые можно использовать для переопределения стилей по умолчанию. Вот пример из одного из моих проектов. Я думаю, что класс tt-menu - это тот, который вам нужен. Он управляет всем всплывающим меню в целом. 

/*****************************
 * Twitter Typeahead Styling *
 *****************************/
.twitter-typeahead {
    width: 100%;
}

.tt-hint {
  color: #999;
}

.tt-menu {
  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:hover {
  background-color: #ddd;
}

.tt-suggestion p {
  margin: 0;
}

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

}

Изменение сгенерированного HTML потребует разветвления проекта, изменения кода, а затем использования вашей пользовательской версии. Это не невозможно, но изменение внутренней работы typeahead. js, вероятно, не то, что вы хотите получить.

...