Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


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

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

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

#search input
  • +1 1
Link to post
Share on other sites

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

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

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

$(document).ready(function(){

Добавьте:

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

 

  • +1 2
Link to post
Share on other sites

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

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

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

#search input

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

Link to post
Share on other sites

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

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

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

  • +1 1
Link to post
Share on other sites

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

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

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

 

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

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

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

Edited by Prooksius
  • +1 1
Link to post
Share on other sites

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

  • +1 1
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.

×
×
  • Create New...

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.