0

Есть форма. Хочу сделать так, чтобы при раскрытии описания форма растягивалась. Пока я просто задал margin, чтобы текст не выползал за рамки.

$( document ).ready(function() {
/*focus*/
/*placeholder*/

$("input").focus(function(){
	$(this).parent().children(".label").animate({"margin-top": "-20px"}, 300);
	$(this).animate({"padding-top": "0px"}, 300);
})

$("input").focusout(function(){
	$(this).parent().children(".label").animate({"margin-top": "0px"}, 300);
	$(this).animate({"padding-top": "14px"}, 300);

});
/*animate description*/

$("#f-phone, #f-email").children("input").focus(function(){
		$(this).parent().parent().children(".i-descr").slideDown();
});

$("#f-phone, #f-email").children("input").focusout(function(){
		$(this).parent().parent().children(".i-descr").slideUp();
});

});
@import url('https://fonts.googleapis.com/css?family=Changa+One:400i');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

.sect-input select,.sect-input input:active, .sect-input input:focus {
	outline: none;
}

.container{
	padding-bottom: 70px;
}

.clr:after {
  content: "";
  display: table;
  clear: both;
}

.container{
	position: relative;
	width: 900px;
	min-height: 600px;
	margin: 0 auto;
	border: 1px solid black;
	background-color: #ccc;
}
.form{
	position: absolute;
	left: calc(50% - 250px);
	top: 70px;
	width: 530px;
	margin: 0 auto;
	min-height: 200px;
	border-radius: 7px;
	background-color: #fff;
	overflow: hidden;
	z-index: 1;
}

.f-header{
	font-family: 'Changa One', cursive;
	position: relative;
	background-color: #0072BC;
	color: #fff;
	padding: 15px;
	font-size: 16px;
}

.f-close{
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -5px;
	right: 20px;
	width: 10px;
	height: 10px;
	background: url(http://myfrelance.ho.ua/images/f-close.png
) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	display: inline-block;
}

.f-steps{
	position: relative;
	top: -6px;
	text-align: center;
	font-size: 14px;
	font-weight: 200;
	color: #0072BC;
}
.f-step{
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	width: 90px;
}
.f-step:first-child{
	margin-left: 0px;
}
.f-steps span{
	display: block;
	position: relative;
	left: 50%;
	margin-left: -5px;
	margin-bottom: 5px;
	width: 12px;
	height: 12px;
	border: 1px solid #0072BC;
	border-radius: 50%;
	background-color: #fff;
}
span.step-active{
	background-color: #0072BC;
	box-shadow: inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff;
}

.f-content{
	padding: 24px;
	font-size: 12px;
	font-family: 'Fira Sans', sans-serif;
}
.f-description{
	margin-bottom: 20px;
	color: #949494;
}

.sect-input{
	position: relative;
	width: 230px;
	height: 40px;
	margin-bottom: 20px;
	box-sizing: border-box;
	border: 1px solid #949494;
	border-radius: 3px;
}

.sect-input select{
	position: absolute;
	width: 100%;
	height: 100%;
	border:none;
	background: none;
	appearance: none; 
	-webkit-appearance: none; 
	-o-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	padding: 5px;
	padding-top: 19px;
	padding-left: 10px;
	color: #949494;
}

.sect-input input{
	box-sizing: border-box;
	color: #949494;
	padding-top: 14px;
	padding-left: 9px;
	background: none;
	border: none;
	margin: 0;
	height: 100%;
	width: 100%;
}

.sect-input .label{
	padding: 5px;
	padding-left: 10px;
	position: absolute;
	color: #0072BC;
	font-weight: bold;
	z-index: -1;
}

/* ARROW*/
.arrow{
	border-left: 1px solid #949494;
	position: absolute;
	height: 38px;
	top: 0px;
	right: 10px;
	padding-left: 10px;
	z-index: -1;
}
.arrow-down {
	margin-top: 16px;
	width: 0; 
	height: 0; 
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-top: 11px solid #0072BC;
}
.f-input-item{
	float: left;
	width: 230px;
}

.f-input-item:nth-of-type(even){
	margin-left: 20px;
}
.f-input-item:nth-child(2){
	float: none;
	margin-left: 0px;
}

.i-descr{
	margin-top: 10px;
	color:#0072BC;
	display: inline-block;
	margin-bottom: 10px;
	padding: 1px;
	width: 100%;
	display: none;
}

.f-bottom-content{
	
}
<div class="container">

	<div class="form clr">
		<div class="f-header">Contact form <div class="f-close"></div></div>
		<div class="f-steps">
				<div class="f-step"><span class="step-active"></span>You</div>
				<div class="f-step"><span></span>Outbound party</div>
				<div class="f-step"><span></span>Return party</div>
		</div>
		<div class="f-content clr">
			<div class="f-description">
				Description why is it needed, so the user feels encouraged, not discourages by the length of the step
			</div>

			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">Title</div>
					<select name="Title" value="">
						<option value="Mr">Mr</option>
						<option value="Mis">Mis</option>
					</select>
					<div class="arrow">
						<div class="arrow-down"></div>
					</div>
				</div>
			</div>

			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">Name</div>
					<input type="text" name="" placeholder="e.g. John" value=""></input>
				</div>
			</div>

			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">Surname</div>
					<input type="text" name="" placeholder="e.g. Doe" value=""></input>
				</div>
			</div>

			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">Street</div>
					<input type="text" name="" placeholder="e.g. Baker Street 221B" value=""></input>
				</div>
			</div>
			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">Postal code</div>
					<input type="text" name="" placeholder="e.g. 012345" value=""></input>
				</div>
			</div>

			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">City</div>
					<input type="text" name="" placeholder="e.g. Berlin" value=""></input>
				</div>
			</div>

			<div class="f-input-item">
				<div class="sect-input">
					<div class="label">Country</div>
					<select name="Title" value="">
						<option value="Mr">Germany</option>
						<option value="Mis">England</option>
					</select>
					<div class="arrow">
						<div class="arrow-down"></div>
					</div>
				</div>
			</div>

			<div class="f-input-item">
				<div id="f-phone" class="sect-input">
					<div class="label">Mobile number</div>
					<input type="text" name="" placeholder="e.g. Berlin" value=""></input>
				</div>
				<div class="i-descr">Leave your phone number so we can contact you in a case of any ...</div>
			</div>

			<div class="f-input-item">
				<div id="f-email" class="sect-input">
					<div class="label">Email</div>
					<input type="email" name="" placeholder="e.g. john@doe.com" value=""></input>
				</div>
				<div class="i-descr">We will send you confirmation on this email.If you choose to register, your e-mail is your login.</div>
			</div>
		</div>
		<div class="f-bottom-content"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

С clearfix проблемы или с чем?

введите сюда описание изображения

Чтобы надпись появилась, нужно нажать на поле "Mobile number" или "Email".

Пример в CodePen.

1 ответ 1

0

Текст находится внутри блока с <input>-ом, а ему задана фиксирована высота. Вот текст и не может тянуть фиксированную высоту.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.