При клике на поиск прыгает высота, а при потере фокуса нормальная, как поправить?

Question

[olya_097]

При клике на поиск прыгает высота, а при потере фокуса нормальная, как поправить?
https://codepen.io/anon/pen/WBBqLv

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/vwwoEP так может быть ?

Comments

[olya_097]

Максим Ленский, спасибо
тоесть основная суть в том что нужно было враперу дать relative
а форме - absolute с параметрами для центровки?

[Максим]

olya_097, Ну смотри - ты при фокусе делаешь форме width :100% но само меню же не прячешь а надо либо убирать меню и потом делать для формы 100% ширину либо просто поставить абсолютно форму но для этого нужен родитель т.е realtive

[olya_097]

Максим Ленский, ок
поняла
а почему для центровки не хватает только top : 50%
а нужен еще и transform: translateY(-50%)?

[Максим]

olya_097, тут обычная математика ... top : 50% сдвинет весь блок относительно релатива ...а вот translateY(-50%) сдвинет на -50% по оси Y именно от ширины нужного блока т.е нашу форму ..потренеруйтесь и увидите это в действии

[olya_097]

Максим Ленский, cпасибо огромное)

[olya_097]

Максим Ленский, а почему кнопка поиска дергается по клику?