How to make input fields with default values display label c

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>

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

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.

Add comment

jan.richter pro answered 6 years ago

0 0 Best answer

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?

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 1 Best answer

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

Add comment

footnootes answered 6 years ago

0 0 Best answer

How is this done if coded in react?

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi,

I forwarded your question to the react team.

Best, Marta

Add comment

Jakub Mandra staff premium answered 6 years ago

0 0 Best answer

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

Add comment

mantul answered 5 years ago

0 0 Best answer

how to do this for vuejs? thanks

Add comment

Marta Szymanska staff pro premium answered 5 years ago

0 0 Best answer

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

Add comment

Saul Laniado answered 5 years ago