Ilya Gabas free asked 6 years ago


Hi. I have some problem with data-error for inputs: 1) Have some cases to set correct margin value for data-error message (dependent on fail content) 2) When have error-data on label, but inputs does not have some value (without class active) We can see big text (not 0.8rem) with incorrect padding above inputs see pic. error IMAGE url https://drive.google.com/file/d/0B1HV0zoyK8XqeF8yVjk2d1l6Q1U/view?usp=sharing

<div class="container">
	<div class="row mt-4">
		<div class="col-lg-6 col-md-8 mx-auto">
			<div class="card">
				<form class="card-block" role="form" method="POST" action="{{ route('register') }}">
					{{ csrf_field() }}
					<div class="form-header teal accent-4">
						<h2><i class="fa fa-id-card mr-2"></i> Регистрация</h2>
					</div>

					<div class="md-form"> {{-- form-group --}}
						<i class="fa fa-user prefix"></i>
						<input id="name" type="text" class="form-control validate{{ $errors->has('name') ? ' invalid mb-3' : '' }}" name="name" value="{{ old('name') }}" required>
						<label for="name" data-error="{{ $errors->first('name') }}">Введите имя</label>
					</div>

					<div class="md-form">
						<i class="fa fa-envelope prefix"></i>
						<input id="email" type="email" class="form-control validate{{ $errors->has('email') ? ' invalid mb-3' : '' }}" name="email" value="{{ old('email') }}" required>
						<label for="email" data-error="{{ $errors->first('email') }}">Введите e-mail</label>
					</div>

					<div class="md-form">
						<i class="fa fa-mobile prefix"></i>
						<input id="phone" type="tel" class="form-control validate{{ $errors->has('phone') ? ' invalid mb-3' : '' }}" name="phone" value="{{ old('phone') ?? '+7' }}" required>
						<label for="phone" data-error="{{ $errors->first('phone') }}">Введите номер моб. телефона</label>
					</div>

					<div class="md-form">
						<i class="fa fa-lock prefix{{ $errors->has('password') ? ' active' : '' }}"></i>
						<input id="password" type="password" class="form-control validate{{ $errors->has('password') ? ' invalid mb-3' : '' }}" name="password" required>
						<label for="password" data-error="{{ $errors->first('password') }}" class="{{ $errors->has('password') ? ' active' : '' }}">Введите пароль</label>
					</div>

					<div class="md-form">
						<i class="fa fa-lock prefix"></i>
						<input id="password-confirm" type="password" class="form-control validate" name="password_confirmation" required>
						<label for="password-confirm">Повторите пароль</label>
					</div>

					<div class="text-center">
						<button class="btn teal waves-effect waves-light" type="submit">Зарегистрироваться</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
Sorry for my english

Ilya Gabas free answered 6 years ago


may be use like this for width of error

.md-form .prefix~label {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem)
}
@media only screen and (max-width: 992px) {
    .md-form .prefix~label {
        width:86%;
        width: calc(100% - 3rem)
    }
}

@media only screen and (max-width: 600px) {
    .md-form .prefix~label {
        width:80%;
        width: calc(100% - 3rem)
    }
}
For empty inputs do this: (but I think its not a correct style)

input[type=password].invalid+label:after,
input[type=password]:focus.invalid+label:after {
  top: 40px; 
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags