Есть вот такая вёрстка которую нельзя ломать.
.form-line__box{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
overflow: hidden;
position: relative;
padding: 3em 3em;
border-radius: 20px;
background: #293744;
background-position-x: 0%;
background-position-y: 0%;
background-image: none;
background-size: auto;
color: #fff;
}
.select__list{
background: transparent;
border: 1px solid #467797;
margin: 0px 0;
position: absolute;
z-index: 100;
}
<div class="form-line__box">
<div class="g-row g-row_flex g-ai_c_md">
<div class="g-col g-col_md_6">
<div class="g-mb_2_xs g-mb_0_md">
<p class="h2 h2_no_line g-clr_inh">Получите единый инструмент<br>
управления вашим бизнесом</p>
<p>Оставьте заявку и получите подробную <br>
консультацию наших специалистов.</p>
</div>
</div>
<form class="g-col form-dark g-col_md_6 js-validated" action="?" novalidate="novalidate">
<fieldset class="">
<ul class="form-line__list g-row">
<li class="form-line__item g-col g-col_md_6">
<label>
<span class="form-dark__label">Имя*</span>
<input type="text" class="form-dark__field" name="name">
</label>
</li>
<li class="form-line__item g-col g-col_md_6">
<label>
<span class="form-dark__label">Телефон*</span>
<input type="tel" name="phone" class="form-dark__field js-mask">
</label>
</li>
<li class="form-line__item g-col g-col_md_6">
<label>
<span class="form-dark__label">E-mail*</span>
<input type="email" name="email" class="form-dark__field js-mask">
</label>
</li>
<li class="form-line__item g-col g-col_md_6" style="z-index: 100;">
<label>
<span class="form-dark__label">Тип компании</span>
<div class="select"><div class="select__gap form-dark__field on active"><ul class="select__list" style="">
<li class="select__item" data-value="Фитнес-клуб"><span>Фитнес-клуб</span></li>
<li class="select__item" data-value="Танцевальная школа"><span>Танцевальная школа</span></li>
<li class="select__item" data-value="Йога-центр"><span>Йога-центр</span></li>
<li class="select__item" data-value="Кросфит"><span>Кросфит</span></li>
<li class="select__item" data-value="Велнес-центр"><span>Велнес-центр</span></li>
<li class="select__item" data-value="Школа единоборств"><span>Школа единоборств</span></li>
<li class="select__item" data-value="Теннисный клуб"><span>Теннисный клуб</span></li>
<li class="select__item" data-value="Бассейн"><span>Бассейн</span></li><li class="select__item" data-value="Детский развивающий центр"><span>Детский развивающий центр</span></li>
<li class="select__item" data-value="Стретчинг"><span>Стретчинг</span></li>
<li class="select__item" data-value="Салон красоты"><span>Салон красоты</span></li>
</ul>
</div>
</div>
</label>
</li>
<li class="form-line__item g-col g-col_md_6">
<span class="form-dark__label g-hide_xs g-show_md"> </span>
<input type="submit" class="btn btn_sz" value="Оставить заявку" style="width: 100%; font-size: 14px;">
</li>
</ul>
<input type="hidden" name="group" value="free-schedule">
</fieldset>
</form>
</div>
</div>
.select__list
- это выподающий список. Проблема в том что из-за overflow:hidden у .form-line__box
он обрезается по границам родителя.
Как конкретно для .select__list
отменить overflow:hidden;
?
Никак. Это свойство не наследуется.
.form-line__box {overflow:visible;}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Хочу сделать элемент задержки показа блока на 5 секундТоесть загрузили страницу и через 5 секунд появился блок с линками и т
Для примера, есть пустая страница на html, кроме тега script на ней ничего нетПодскажите как создать на ней блок или абзац
Подскажите, как можно протестировать данный компонент при помощи jest и enzyme