Form input-field is too small using Materialize-CSS - css

Question

I have a Login form for a basic Admin Portal, however the input-field itself to click on is extremely small. The bar itself seems to be the entire size of the clickable input-field, so you can't click the label whatsoever to enter.
Code as follows:
<div className="container">
<form onSubmit={handleSubmit} className="white">
<h5 className="center">Cars4U Administration</h5>
<div className="input-field">
<input type="text" name="username" className="validate" required onChange={handleChange} />
<label htmlFor="username">Username</label>
</div>
<div className="input-field">
<input type="password" name="password" className="validate" required onChange={handleChange} />
<label htmlFor="password">Password</label>
</div>
<div className="input-field center">
<button className='btn z-depth-0' type='submit'>Login</button>
</div>
</form>
</div>
If my cursor is in the following position, I am unable to click the input-field. I am only able to click it directly on the line:
CSS:
form {
background-color: white;
margin-top: 80px;
margin-left: 350px;
margin-right: 350px;
border-radius: 3px;
}
form label {
padding-left: 40px;
padding-right: 40px;
padding-top: 20px;
font-weight: 700;
}
form .input-field {
padding-left: 40px;
padding-right: 40px;
padding-top: 20px;
}

Answer 1

According to Anthony's suggestion, you're supposed to have both name and id as identifiers.
Add id to your input -
<input name="username"/> to <input name="username"id="username"/>
class App extends React.Component {
render() {
return (
<div className="container">
<form className="white">
<h5 className="center">Cars4U Administration</h5>
<div className="row">
<div className="input-field">
<input type="text" id="username" className="validate" required />
<label htmlFor="username">Username</label>
</div>
<div className="input-field">
<input
type="password"
id="password"
className="validate"
required
/>
<label htmlFor="password">Password</label>
</div>
</div>
<div className="input-field center">
<button className="btn z-depth-0" type="submit">
Login
</button>
</div>
</form>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>