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

Saul Laniado free answered 4 years ago

0 0 Best answer

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

Marta Wierzbicka staff commented 4 years ago

Thank you for your solution.

Add comment

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

mantul free answered 4 years ago

0 0 Best answer

how to do this for vuejs? thanks

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

I forwarded your question to the react team.

Best, Marta

Add comment

footnootes free answered 5 years ago

0 0 Best answer

How is this done if coded in react?

Add comment

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

jan.richter pro answered 5 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 5 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 Wierzbicka staff answered 5 years ago

0 0 Best answer

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

waynefulcher pro commented 5 years ago

How do I send you the image. This forum does not seem to support upload image from my PC.

Add comment

Write

Create snippet

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

waynefulcher

Pro User 101Support score
11Questions 4Answers 0Snippets