Блог

Главная - Вопросы по программированию - Как добавить 2-ю плавающую метку для ввода при использовании 1 div только в начальной загрузке 5

Как добавить 2-ю плавающую метку для ввода при использовании 1 div только в начальной загрузке 5

#html #twitter-bootstrap #input #label #floating-labels

Вопрос:

Как я могу добавить 2-ю плавающую метку в нужное поле ввода? проблема теперь в том, что 2-я метка перекрывает первую метку в 1 — м поле ввода:

 <div class="form-floating input-group">                         
    <input type="text" name="" class="form-control delete-from-date" value="" />
    <label for="floatingDateToDelete">startdate</label>
    <span class="input-group-text">till</span>                          
    <input type="text" name="" class="form-control delete-till-date" value="" />
    <label for="floatingDateToDelete">Enddate</label>   
    <button type="submit" class="btn btn-danger delete-multiple-events" name="submit">Delete</button>               
</div>

вот скрипка, в которой вы можете увидеть проблему: http://jsfiddle.net/1uf0zv2d/6/

Плавающая метка «Дата окончания» должна появиться в правом поле ввода

Ответ №1:

Каждая input label комбинация должна находиться в своем собственном .form-floating классе. Наличие нескольких входов в одном и том же div вызывало эту проблему. Кроме того, в каждом поле ввода требуется заполнитель.

Я переместил всю комбинацию в контейнер, который .input-group на ней есть. Вы можете посмотреть на изменения здесь.

 <html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
  <div class="input-group">
    <div class="form-floating">
      <input type="text" class="form-control delete-from-date" id="floatingDateToDelete1" placeholder="startdate" />
      <label for="floatingDateToDelete1">startdate</label>
    </div>
    <span class="input-group-text">till</span>
    <div class="form-floating">
      <input type="text" class="form-control delete-till-date" id="floatingDateToDelete2" placeholder="Enddate" />
      <label for="floatingDateToDelete2">Enddate</label>
    </div>
    <button type="submit" class="btn btn-danger delete-multiple-events" name="submit">Delete</button>
  </div>
</body>

</html>
Метки: