Проблема с высотой блока?

Question

[Breeze1]

beta.remodelzz.com/professionals

Если в правой форме в select выбрать пункт "Contractor(any)". Добавляется новое поле в форму, и прыгает некрасиво высота всей страницы. Если например форме задать фикс высоту, то внизу белое пространство остается некрасивое.

Может кто-нибудь подскажет красивое решение, спасибо

Answer 1

[Татьяна С]

Можно попробовать такой вариант:
1) задать форме (.form--partner) высоту, как при выбранном пункте "Contractor(any)".
2) cделать ей display: flex; flex-direction: column; justify-content: space-between;

Тогда не при "Contractor(any)" расстояние между строками будет побольше, а высота самой формы будет постоянной.

Comments

[Breeze1]

Тань, спасибо вам. Действительно очень крутое решение )

Answer 2

[ArtGenSky]

Можно попробовать анимировать скрытие и показ поля через css

.form-row {
    max-height: 300px; 
    overflow: hidden;
    transition-property: max-height;
    transition-duration: .5s;
}
.is-hidden {
    max-height: 0;
	display: block !important;
}

max-height: 300px; - здесь должно быть значение гарантировано большее чем высота .form-row

Comments

[Breeze1]

мы анимировали просто появление поля, но высота страницы все-равно меняется.

[ArtGenSky]

Breeze1, Так вы же хотели, чтобы высота блока не прыгала, теперь она плавно изменяется

[Breeze1]

ArtGenSky, я возможно неправильно выразился. Я хочу чтобы высота всей страницы не менялась, когда поле появляется. Тут я вижу только фикс высоту для всей формы. Но при этом появляется внизу пустое пусто некрасивое. В общем не знаю уже что и делать )

[ArtGenSky]

Breeze1, так высота страницы и не изменяется на мониторах с высотой 1080, а на более низких страница все равно имеет скролл. Еще одним решением может быть фикс высота для блока с формой, но со скроллом, если будут добавляться новые поля.

[ArtGenSky]

Breeze1, а нет, ошибся, похоже что изменяется высота страницы на мониторах 1080, у меня 1200

Answer 3

[tyzberd]

для s-fluid s-fluid--bg задать минимальную высоту с учетом всех полей 876px и для моб подогнать через media