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>
 

Marta Szymanska staff pro premium 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.

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 Szymanska staff pro premium 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

footnootes answered 6 years ago

How is this done if coded in react?


Marta Szymanska staff pro premium answered 6 years ago

Hi,

I forwarded your question to the react team.

Best, Marta


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

how to do this for vuejs? thanks


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


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


Marta Szymanska staff pro premium commented 6 years ago

Thank you for your solution.


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