Всплывашка необъяснимо меняет размер. Как понять почему?

[alinalessioYandex]

Есть сайт https://pfdecor.ru/

В правом верхнем углу есть поиск.

Когда его нажимаю, то, раскрывается поле поиска и тут же раскрывается всплывашка с подсказками по поиску.

Дело в том, что эта всплывашка почему-то узкая.

 

Кто подскажет как её сделать в размер раскрывающегося поля?

 

Есть особенность.

1. Когда в DevTools делаю узкий экран

2. Обновляю страницу

3. Снова делаю широкий экран

4. Жму на поиск

то в этом случае, всплывашка принимает ширину раскрывшегося поля. Но почему не ведёт себя так же сразу, не понятно.

Змінено 6 квітня 2021 користувачем alinalessioYandex

[Prooksius]

косяк верстки.

при нажатии на значок поиска, окно поиска открывается сразу и с текущей шириной = ширине поля ввода, а поле ввода увеличивает ширину постепенно, из-за transition.
Можно отключить transition у этого элемента

#search input

[Prooksius]

либо увеличивать ширину не через transition, а js-ом (animate) и в конце анимации открывать окно поиска.
Но проще отключить transition

[iglin]

56 минут назад, alinalessioYandex сказал:

Кто подскажет как её сделать в размер раскрывающегося поля?

Ну а правильней всего думаю поставить searchDelay в flexdatalist такой же как transition у поля ввода поиска.

В вашем случае 300.

P.S. Хотя нет, так не выйдет)) Это задержка только между вводом букв. Так же как и transition убирать в 0 тоже не всегда срабатывает, если быстро начинаешь тыкакт нет нет да схватывает значения ещё до того как браузер применит псевдокласс к элементу)) 

P.P.S. На скорую руку пришёл в голову пока только один "костыль" - в index.php?route=product/search/livesearch в php поставить задержку usleep(300)  Но тогда кэш flexdatalist нужно отключить))

[halfhope]

Вычисление размера элемента, идет при событии окна - resize. Вызовите его при загрузке страницы. В файл common.js, после строки:

$(document).ready(function(){

Добавьте:

$(window).trigger('resize');

 

[alinalessioYandex]

17 часов назад, Prooksius сказал:

косяк верстки.

при нажатии на значок поиска, окно поиска открывается сразу и с текущей шириной = ширине поля ввода, а поле ввода увеличивает ширину постепенно, из-за transition.
Можно отключить transition у этого элемента

#search input

Спасибо всем. Убрал транситион и всё заработало. Всем плюсики от меня. Спасибо.

[iglin]

Только что, alinalessioYandex сказал:

Убрал транситион и всё заработало. Всем плюсики от меня. Спасибо.

Потыкайте быстро на кнопочку поиска) У меня вчера стабильно удавалось раз в минуту ловить "узкий список" )) Но это конечно синтетический тест и ни какой клиент в здравом уме так делать не будет)

[Prooksius]

1 час назад, alinalessioYandex сказал:

Убрал транситион и всё заработало.

у меня нормально работает без транзишена

 

1 час назад, iglin сказал:

У меня вчера стабильно удавалось раз в минуту ловить "узкий список"

Может от браузера зависит. По разному, видно, браузеры считают ширину элемента, с разной задержкой.

Змінено 7 квітня 2021 користувачем Prooksius

[Prooksius]

Но вообще конечно, этот js плагин несовместим с такой версткой просто. Надо или переписать его с учетом задержки, или отказаться от него. Неудобный он, на мой взгляд.