Topic: How to make input fields with default values display label correctly (not over top of default value)?

waynefulcher pro asked 6 years ago


I am trying to use the nice input fields in MDB Pro but in my sign in page Chrome will automatically supply the email address as a default value. The label text is covering the default value and does not move above the field until I actually click on the field. Since the label text is overlapping the default value, none of it is readable. Below is a snippet of the code:
<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>
 

Saul Laniado free answered 5 years ago


Hiyou need to add the active class to de label like this: $('#someForm').find('label').addClass('active')


Marta Wierzbicka staff commented 5 years ago

Thank you for your solution.


Marta Wierzbicka staff answered 5 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


mantul free answered 5 years ago


how to do this for vuejs? thanks


Jakub Mandra staff answered 5 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


Marta Wierzbicka staff answered 5 years ago


Hi,

I forwarded your question to the react team.

Best, Marta


footnootes free answered 5 years ago


How is this done if coded in react?


Marta Wierzbicka staff answered 6 years ago


Hi,
add this code to your scripts and try if it works:
$(document).ready(function () {
setTimeout(function () {
var $Input = $('input:-webkit-autofill');
$Input.next("label").addClass('active');
}, 200);
});
Best,
Marta

jan.richter pro answered 6 years ago


I have a same problem, labels don't react correctly on inputs filled by JS or with default values. The labels are over the field as in empty input field. I tried some .focus() attributes but still the same problem. But in materialize community posts that is the solution.  

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 Wierzbicka staff answered 6 years ago


Hi, could you show me a screenshot how it looks? Best, Marta

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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: 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