Попался мне UI баг, когда autocomplete слой с результатами поиска оказывался больше по ширине, чем input элемент, к которому он был прикреплен.
Не ясен был алгоритм, по которому вычислялась ширина слоя. В одних случаях это происходило корректно, а в других нет.
Пришлось копнуть в исходники jquery_ui_autocomplete, который в моём проекте поставлялся с помощью drupal модуля jquery_ui.
|
1 2 3 4 5 6 7 8 9 10 |
_resizeMenu: function() { var ul = this.menu.element; ul.outerWidth( Math.max( // Firefox wraps long text (possibly a rounding bug) // so we add 1px to avoid the wrapping (#7513) ul.width( "" ).outerWidth() + 1, this.element.outerWidth() ) ); }, |
Как оказалось ширина слоя выбирается как максимум между шириной input элемента, к которому прикреплен виджет, и (неожиданно) шириной списка с подсказками автодополнения.
Логика, видимо, в том, что ширина не должна быть меньше поля ввода, но если подсказки шире поля ввода — то и сам слой со списком должен быть шире.
К счастью, архитектура UI виджетов предоставляет механизм перезаписи части методов. Потому, я выполнил переопределение данной функции, исправив логику вычисления ширины на ту, что мне требовалась.
|
1 2 3 4 5 6 |
jQuery.widget( "ui.autocomplete", jQuery.ui.autocomplete, { _resizeMenu: function() { var ul = this.menu.element; ul.outerWidth(this.element.outerWidth()); } }); |
Если вы нуждаетесь в решении этой проблемы в контексте drupal (9/10) проекта, то код следует оформить в виде библиотеки:
|
1 2 3 4 5 6 |
ui_jquery_autocomplete_fix: js: assets/js/ui-jquery-autocomplete-fix.js: {} dependencies: - core/jquery - jquery_ui/jquery_ui_autocomplete |
Останется только подключить библиотеку в вашей теме.