Topic: How to make input fields with default values display label correctly (not over top of default value)?
waynefulcher pro asked 6 years ago
<div class="login-input-group md-form"> <i class="fa fa-envelope prefix"></i> <input id="email" name="email" type="email" class="form-control" value="{{ old('email') }}"> <label for="email" class="login-input-group-addon">E-mail Address</label> </div>
Marta Szymanska staff pro premium answered 6 years ago
waynefulcher pro commented 6 years ago
How do I send you the image. This forum does not seem to support upload image from my PC.jan.richter pro answered 6 years ago
waynefulcher pro commented 6 years ago
Sorry, something you said I am not clear of its meaning... Are you saying someone has a solution to this listed in another post? Or are you saying someone listed a solution but it still does not work in our case?Marta Szymanska staff pro premium answered 6 years ago
$(document).ready(function () { setTimeout(function () { var $Input = $('input:-webkit-autofill'); $Input.next("label").addClass('active'); }, 200); });
footnootes answered 6 years ago
Marta Szymanska staff pro premium answered 6 years ago
Jakub Mandra staff premium answered 6 years ago
Hi @footnootes,
You can use Inputs as the controlled or uncontrolled components.
state = {
value: "Controlled input with value",
}
render() {
return (
<div>
<MDBInput label="Material uncontrolled input" valueDefault="Uncontrolled input with default value" />
<MDBInput label="Material controlled input" value={this.state.value} />
</div>
)
}
They will render properly with no worries :)
Best,
Jakub
mantul answered 6 years ago
Marta Szymanska staff pro premium answered 6 years ago
Hi,
if you need support with MDB Vue, please create a forum ticket by marking the correct technology, for this example, not "jQuery" but "Vue" and then someone from MDB Vue team will help you.
Best, Marta
Saul Laniado answered 6 years ago
Hiyou need to add the active class to de label like this: $('#someForm').find('label').addClass('active')
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.9
- Device: PC intel i7
- Browser: Chrome 68 64bit
- OS: Windows 10
- Provided sample code: No
- Provided link: No