Characters are overlapping in React form

Question

Label and input letters are overlapping in React form.

Desired look: Top image

Current behavior: Bottom image

How can I fix it?

<h5 className="grey-text text-darken-3">Sign In</h5>
<div className="input-field">
  <label htmlFor="email">Email</label>
  <input type="email" id="email" onChange={this.handleChange}/>
</div>

score 1 · Accepted Answer · answered Feb 21 '21 at 03:51

1

From your css classes, I guess you are using materialize css for styling. For the effect you wish to see, you need to import the javascript module of it too, if not.

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

answered Feb 21 '21 at 03:51

Major_Ash

199
3
16

https://stackoverflow.com/questions/35499842/how-to-use-materialize-css-with-react This should help – Major_Ash Feb 21 '21 at 03:56

score 0 · Answer 2 · answered Feb 21 '21 at 03:42

0

Better to use placeholder in the input tag instead of label tag

<input type="email" id="email" onChange={this.handleChange} placeholder="email"/>

answered Feb 21 '21 at 03:42

Ishaan Kanwar

399
1
4
16

Nice suggestion, but with all due respect, the OP did not ask for an alternative to label. They want to know how to fix what's currently broken. – codemonkey Feb 21 '21 at 03:48

score 0 · Answer 3 · answered Feb 21 '21 at 03:48

0

Use display:block in label element.

<label htmlFor="email" style={{display:'block'}}>Email</label>

answered Feb 21 '21 at 03:48

GrimReaper07

455
5
13

Characters are overlapping in React form

3 Answers3