CODEWITHSUNDEEP
cssmaterialize
simplest
simplest

Reputation: 217

Form input-field is too small using Materialize-CSS

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:

enter image description here

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;
}

Upvotes: 3

Views: 784

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

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>

Upvotes: 2

Related Questions