Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

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

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

2021-04-07_01-07-09.png.9fe0e1f32302716dea38c97141da0514.png

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

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

2021-04-07_01-10-57.png.5bb1423feaac1bced80b9db2d1ce4ada.png

 

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

 

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

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

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

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

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

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

Изменено пользователем alinalessioYandex
Ссылка на комментарий
Поделиться на других сайтах


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

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

#search input
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

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

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

$(document).ready(function(){

Добавьте:

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

 

  • +1 2
Ссылка на комментарий
Поделиться на других сайтах

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

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

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


#search input

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

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

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

 

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

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

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

Изменено пользователем Prooksius
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.