Как доработать всплывающую форму?

[borus]

Здравствуйте.

На странице, если нажать кнопку "Заказ в 1 клик", то можно увидеть всплывающую форму.

Пробую ей пользоваться на своем мобильнике, и когда дохожу до её низа:

и кликаю на поле Комментарий, то на телефоне получается такая неприятная картина:

то есть выдвигающаяся клавиатура скрывает поле, в котором ты набираешь текст.

Как можно исправить эту "слепоту"?

[Switch74]

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

Единственное - нужно подумать как и когда убирать этот отступ. Пока на ум приходит потеря фокуса данным полем.

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

[borus]

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

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

Единственное - нужно подумать как и когда убирать этот отступ. Пока на ум приходит потеря фокуса данным полем.

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

Спасибо. То есть речь о регулировании #contactForm_oneclick, если правильно понял

Кстати про высоту этого #contactForm_oneclick: как правильно было бы управлять его высотой? Например сейчас у него встроенным стилем задаётся высота 415 px. При этом на большом экране появляется скроллинг, а на мобильнике можно протянуть форму вниз до кнопки купить. Если же поставить высоту 500 пикс, то на большом экране на форме убираются ползунки прокрутки, но на моем мобильнике уже никаким свайпом не получается нормально долистать до кнопки "Купить"(почему так?), лишь только её краешек виден, по которому даже натренеровавшись очень сложно попасть.

[Switch74]

Тут много нюансов:

1. у вас окно position:fixed; оно у вас должно на мобильнике быть height:100%;overflow:auto;
2. скролл от body у вас остается активным, а крутить его смысла нет
3. строгие размеры - это как правило зло, особенно в адаптивной верстке

я бы для вашего #contactForm_oneclick сделал обертку, которая будет 100% по высоте и position:fixed; с overflow:auto;
а вашу форму сделал резиновой по высоте, тогда если она будет слишком большой, то у вас будет появляться скролл, иначе будет показываться вся форма

[borus]

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

Тут много нюансов:

1. у вас окно position:fixed; оно у вас должно на мобильнике быть height:100%;overflow:auto;
2. скролл от body у вас остается активным, а крутить его смысла нет
3. строгие размеры - это как правило зло, особенно в адаптивной верстке

я бы для вашего #contactForm_oneclick сделал обертку, которая будет 100% по высоте и position:fixed; с overflow:auto;
а вашу форму сделал резиновой по высоте, тогда если она будет слишком большой, то у вас будет появляться скролл, иначе будет показываться вся форма

Спасибо.

Получается в предложенном Вами варианте на больших мониторах всплывающее окно будет до нижнего края экрана идти с кучей пустого места? 

Может есть вариант, который ограничивает максимальную высоту формы например 500 пикселями, чтобы на больших мониторах не было на скроллинга и отображения формы на весь экран, а на экранах сотовых добавлялся бы скроллинг?

[Switch74]

пустого не будет

[borus]

15 часов назад, Switch74 сказал:

пустого не будет

Здравствуйте!

Спасибо. Я здесь реализовал предложенную Вами идею. Кликните пожалуйста на какую-либо кнопку "Заказ в 1 клик". На большом мониторе если смотреть, форма растягивается с кучей свободного пространства внизу под кнопкой Купить: 

Видимо, я не правильно Вас в чем-то понял?

[Switch74]

сейчас у меня на сайте стара форма с скроллом

судя по скрину вы сделали для своей формы height:100%, а нужно было для обертки вашей формы, которую вы должны были добавить. Для формы height:auto; укажите.

 

[borus]

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

сейчас у меня на сайте стара форма с скроллом

судя по скрину вы сделали для своей формы height:100%, а нужно было для обертки вашей формы, которую вы должны были добавить. Для формы height:auto; укажите.

 

наверно Вам надо кэш сбросить либо Вы прошли не по этой ссылке

для обёртки #aux я сделал height:100%, а для формы #contactForm_oneclick сделал height: auto;

Скрины:

а) обертка:

б) форма:

Edited April 5, 2016 by borus

[Switch74]

Прохожу как раз по данной ссылке, кэш чистил - не помогло

у вас contactForm_oneclick имеет height:auto; но при этом он position:fixed; с top и bottom что выставляет для этого блока жесткие размеры

в данном варианте вам нужна обертка для contactForm_oneclick c position:fixed;height:100%;overflow:auto;
а contactForm_oneclick сделать обычным position:relative; например

[Dlynnyj]

а не проще было в псевдо класе @media для определённого разрешения при активном этом поле добавить отступ снизу?

[borus]

20 часов назад, Dlynnyj сказал:

а не проще было в псевдо класе @media для определённого разрешения при активном этом поле добавить отступ снизу?

Здравствуйте! Спасибо.

То есть активному инпуту добавить отступ снизу? попробую... Только зачем "для определённого разрешения "? Речь ведь о вертикальном размере формы. Или вы о высоте экрана?

Edited April 8, 2016 by borus

[psixodyb]

@media(not screen) {
	input:focus { // Нужное написать
		margin-bottom: 150px;
	} 
}

 

[Dlynnyj]

или

@media(max-width 800px) {
	input:focus { // Нужное написать
		margin-bottom: 150px;
	} 
}