Jump to content
alinalessioYandex

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

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. Жму на поиск

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

Edited by alinalessioYandex

Share this post


Link to post
Share on other sites

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

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

#search input
  • +1 1

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

$(document).ready(function(){

Добавьте:

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

 

  • +1 2

Share this post


Link to post
Share on other sites
17 часов назад, Prooksius сказал:

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

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

#search input

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

Share this post


Link to post
Share on other sites
Только что, alinalessioYandex сказал:

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

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

  • +1 1

Share this post


Link to post
Share on other sites
1 час назад, alinalessioYandex сказал:

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

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

 

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

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

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

Edited by Prooksius
  • +1 1

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.