Метка css класс не читает ввод как пустой после использования bootstrap Datetime Picker - PullRequest
Новая
       36

Метка css класс не читает ввод как пустой после использования bootstrap Datetime Picker

0 голосов
/ 12 марта 2020

У меня есть класс CSS, в котором метка должна переходить наверх после того, как ввод больше не пуст. При использовании tempusdominus- bootstrap и выборе даты она не регистрируется как пустая, и мой текст перекрывается.

HTML

      <div class="col-lg-6">
        <div class="form-group">
          <div id="datetimepicker1" data-target-input="nearest">
            <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
              <input type="text" class="form-control-input" id="dob" name="dob" data-target="#datetimepicker1" />
              <label class="label-control" for="dob">Date Of Birth</label>
              <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
          </div>
        </div>

CSS

.label-control {
    position: absolute;
    top: 0.8125rem;
    left: 1.375rem;
    color: #787976;
    opacity: 1;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    cursor: text;
    transition: all 0.2s ease;
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
    top: 0.125rem;
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 500;
}

.form-control-input,
.form-control-select {
    display: block; /* needed for proper display of the label in Firefox, IE, Edge */
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1.3125rem;
    border: 1px solid #dadada;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #787976;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    transition: all 0.2s;
    -webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

И вот так выглядит после выбора даты: https://i.imgur.com/d6FZHli.png

Любая помощь будет с благодарностью!

...