Question

我和我的团队目前正在开发一个需要注册表格的Web应用程序。我们决定使用Materialize框架来简化前端的开发，现在我们面临着一个非常令人不快的事情：所有选择字段的前缀图标都与这些字段重叠。

我们已经尝试遵循我们在其他网站上发现的内容-显然，这是一个已知问题，可能已经得到解决。

所以这是现在的代码：

M.AutoInit();

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>


<div class="container">
  <div class="row">
    <form class="col s12">
      <div class="row">

        <div class="input-field col s12">
          <i class="material-icons prefix">keyboard</i>
          <input id="code" type="text" class="validate" v-model="sponsor">
          <label for="code">Code Mairie</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">mail</i>
          <input id="email" type="text" class="validate" v-model="email">
          <label for="email">Email</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">vpn_key</i>
          <input id="password" type="password" class="validate" v-model="password">
          <label for="password">Mot de passe</label>
        </div>

        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="last_name" type="text" class="validate" v-model="lastName">
          <label for="last_name">Nom</label>
        </div>

        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="first_name" type="text" class="validate" v-model="firstName">
          <label for="first_name">Prénom</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">date_range</i>
          <input id="dob" type="text" class="datepicker">
          <label for="dob">Date de naissance</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">account_box</i>
          <select id="gender" v-model="gender">
            <option value="" disabled selected>Choisir votre sexe</option>
            <option value="1">Homme</option>
            <option value="2">Femme</option>
            <option value="3">Autre</option>
          </select>
          <label for="gender">Sexe</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">favorite</i>
          <select id="maritalSituation" v-model="maritalSituation">
            <option value="" disabled selected>Choisir votre situation</option>
            <option value="1">Célibataire</option>
            <option value="2">Concubinage</option>
            <option value="3">Marié(e)</option>
            <option value="4">Divorcé(e)</option>
            <option value="5">Veuf/Veuve</option>
          </select>
          <label for="maritalSituation">Situation maritale</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">work</i>
          <select id="professionalSituation" v-model="professionalSituation">
            <option value="" disabled selected>Choisir votre situation</option>
            <option value="1">Retraité(e)</option>
            <option value="2">Employé(e)</option>
            <option value="3">Sans Emploi</option>
          </select>
          <label for="professionalSituation">Situation Professionelle</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">local_phone</i>
          <input id="phone1" type="text" class="validate" v-model="phone">
          <label for="phone1">Téléphone 1</label>
        </div>
        <div class="input-field col s12">
          <i class="material-icons prefix">location_on</i>
          <input id="street" type="text" class="validate" v-model="street">
          <label for="street">Rue</label>
        </div>

        <div class="input-field col s4">
          <i class="material-icons prefix">location_on</i>
          <input id="postCode" type="text" class="validate" v-model="postalCode">
          <label for="postCode">Code postal</label>
        </div>

        <div class="input-field col s8">
          <i class="material-icons prefix">location_city</i>
          <input id="city" type="text" class="validate" v-model="city">
          <label for="city">Ville</label>
        </div>
      </div>
    </form>
    <a class="waves-effect waves-light btn col s10 offset-s1" @click="register">S'inscrire</a>
  </div>
</div>

如果运行此命令，您将看到结果与预期的一样。但是，如果您看看这个screenshot，这就是我们在应用程序中获得的结果。

我检查了所有版本并更新了所有内容，我们正在使用：
-materialize-css：^1.0.0-rc2
-material-design-icons：^3.0.1

任何帮助弄清楚为什么会发生这种情况的人将不胜感激。

预先感谢！

Answer 1

最后，我们发现错误是由于添加到父div的属性（如上面的6或7个节点）导致的。
仍然奇怪的是，此错误仅在select输入字段中发生，但问题现已解决。

遇到相同问题的任何人的小技巧：确保没有从父节点继承的属性-即使它很繁琐-也会导致显示异常。

前缀图标重叠内容，用于选择输入字段的Materialize

1 个答案: