Issue
I was facing this problem when there is invalid feedback in the credential, it will cause the icon to move away from its original position. Hereby I attach my code with the relevant CSS. For Your information, I apply bootstrap & Bootstap icon in my design code.
<div class="form-group position-relative has-icon-left mb-3">
<input type="text" class="form-control form-control @error('username') is-invalid @enderror" id="username"
name="username" placeholder="Username">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
@error('username')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
CSS Part
.form-group[class*=has-icon-].has-icon-left .form-control-icon{left:0}
.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}
.form-group{margin-bottom:.7rem}
.position-relative{position:relative!important}
.form-control {
display: block;
width: 100%;
background-color: #f9f9f9;
padding: 12px;
border: 1px solid #ddd;
border-radius: 2.5px;
font-size: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-bottom: 24px;
}
.form-group[class*=has-icon-].has-icon-left .form-control-icon{left:0}.
Solution
It may Help You!!!
.form-group[class*=has-icon-].has-icon-left .form-control-icon{ position: absolute;left:0px;top:0px}
Answered By - Shammi Singh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.