Значок префикса, перекрывающий содержимое для выбранного поля ввода. - PullRequest
Новая
       12

Значок префикса, перекрывающий содержимое для выбранного поля ввода.

0 голосов
/ 01 июля 2018


Моя команда и я в настоящее время работаем над веб-приложением, которому нужна форма регистрации. Мы решили использовать платформу 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>

Если вы запустите это, вы увидите, что результат такой же, как ожидалось. Но если вы посмотрите на этот снимок экрана , это результат, который мы имеем в нашем приложении.

Я проверил все версии и обновил все, мы используем:
- materialize-css: ^1.0.0-rc2
- material-design-icons: ^3.0.1

Буду признателен за любую помощь в выяснении, почему это происходит.

Заранее спасибо!

1 Ответ

0 голосов
/ 02 июля 2018

В итоге мы обнаружили, что ошибка возникла из-за свойства, добавленного к родительскому div (например, 6 или 7 узлов выше), центрировавшему текст.
Тем не менее, странно, что эта ошибка возникает только для полей ввода select, но теперь проблема устранена.

Небольшой совет для тех, кто испытывает ту же проблему: убедитесь, что нет свойства, унаследованного от родительского узла - даже если оно может быть утомительным - что приводит к странному отображению.

...