Unresponsive select box in materialize

Question

I'm using materialize with a node backend and js front end. I'm trying to submit a form. I have the following:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Form Example</span>
          <div class="input-field">
            <input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code" />
            <label for="zip">Zip Code</label>
          </div>

          <div class="input-field">
            <select id="area" name="area" class="validate">
              <option value="2000">2,000 sqft</option>
              <option value="3000">3,000 sqft</option>
            </select>
            <label for="area">Area</label>
          </div>
        </div>
        <div class="card-action">
          <a class="waves-effect waves-light btn" id="submitButton">Submit</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="hot-container" class="mt-4">
  <!-- Handsontable grid will be displayed here -->
</div>

I have an error with the second field(Area) which is greyed out and half visible. It is unresponsive. What am I doing wrong?

Answer 1

It looks like the validate class is not applicable to the select element. The examples found in the docs do not illustrate one with the validate class. Perhaps, the validation (i.e., rejecting any null values) may have been inbuilt within the select element.

As for the issue with the half-visibility, can you check to see if there is a fixed height value for the div.container class? The container should ideally expand based on the number of items it carries.

UPDATE:

Looking at this again, the select element works if the css has been stripped. So, the fault lies somewhere with the css. If you use the next version of the css i.e., 1.1.0-alpha, taken from here, the select element now displays the dropdown field nicely. Sadly, I am not able to pinpoint what went wrong with the dropdown field with this new css version.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Form Example</span>
          <div class="input-field">
            <input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code" />
            <label for="zip">Zip Code</label>
          </div>

          <div class="input-field">
            <select id="area" name="area" class="validate">
              <option value="2000">2,000 sqft</option>
              <option value="3000">3,000 sqft</option>
            </select>
            <label for="area">Area</label>
          </div>
        </div>
        <div class="card-action">
          <a class="waves-effect waves-light btn" id="submitButton">Submit</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="hot-container" class="mt-4">
  <!-- Handsontable grid will be displayed here -->
</div>