Почему не отображаются кнопки со стрелками jQuery UI Spinner? - PullRequest
Новая
       101

Почему не отображаются кнопки со стрелками jQuery UI Spinner?

0 голосов
/ 20 июня 2020

После реализации простейшей стандартной версии jQuery UI Spinner Widget кнопки со стрелками вверх и вниз не отображались. Щелчок по месту, где они должны появиться, вызвал срабатывание событий Spinner и увеличение / уменьшение числа, но кнопки не были видны.

Я нашел несколько связанных (бесполезных) вопросов по SO (подробнее здесь и менее здесь ) и один на форумах jQuery ( здесь ). В последнем треде упоминались возможные Bootstrap конфликты.

Я использую в своем проекте как Bootstrap, так и jQuery (UI).

Пример HTML

<input id="spinner" name="spinner">

и JavaScript

$( "#spinner" ).spinner({
  min: 0,
  step: 100000,
});

не представляли ничего особенного, даже несмотря на то, что помимо этого, очевидно, происходили некоторые специальные CSS.

Попытка стилизовать с использованием jQuery пользовательского интерфейса при условии CSS классов не помогло. При выполнении чего-то вроде 

.ui-spinner-button {
  color: white !important;
  background: black;
}

фон кнопок стал черным, но стрелки по-прежнему не были видны.

1 Ответ

0 голосов
/ 20 июня 2020

TL; DR

Если вы столкнулись с этой проблемой и используете как Bootstrap (v4), так и jQuery (v1.12), попробуйте изменить порядок, в котором их JavaScript ( не CSS, как ни странно) загружается, а именно иметь jQuery загружаться после Bootstrap.

Предостережения

Это может вызвать или не вызвать проблемы, когда jQuery мешает работе Bootstrap. Хотя до сих пор у меня не было подобных проблем.

Почему?

После некоторого рытья и проверки в браузере я обнаружил, что к элементам кнопки применяется стиль (<a> -tags) от Bootstrap, а именно следующие (исходящие из _reboot.s css): 

a:not([href]) {
    color: inherit;
    text-decoration: none;
}

Это, похоже, испортило мои попытки принудительно установить на кнопки другой CSS .

Автор темы на форуме jQuery, упомянутый выше, также обнаружил, что Bootstrap является проблемой, поэтому я попытался возиться с заказами на импорт. Как ни странно, загрузка jQuery UI CSS после Bootstrap CSS ничего не изменила. Когда я переключил импорт JavaScript, он сработал (порядок импорта CSS может остаться прежним).

Почему это так, надеюсь, кто-то другой может сказать. Я просто надеюсь, что это поможет кому-то дергать за волосы, как это сделал я.

...