Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Есть сайт 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
Надіслати
Поділитися на інших сайтах

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 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.