элементы формы не кликабельны

Question

Я занимаюсь разработкой системы, которую меня попросили сделать, но элементы формы не нажимаются для ввода какой-либо информации в полях. Я попытался переместить тег формы выше самого первого элемента div в приведенном ниже коде, если это былопроблема, но не работает, к сожалению.Я не уверен, что еще можно попробовать, может кто-нибудь взглянуть на приведенный ниже код, пожалуйста

Обновление: у меня работают элементы формы, добавив класс zindex: 9999; в .form-group в CSS, но теперьdatetimepicker появляется за выпадающим меню выбора.Я загрузил скриншот проблемы по ссылке ниже

Вот скриншот моей проблемы:

Мой код:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12" id="detail">

  <form name="addData" id="addData" action="" method="post">

    <div class="row">

      <div class="form-group col-lg-3">
        <input type="hidden" name="eventID" id="eventID" class="form-control">
        <label for="StartDate">Start Date: </label>
        <input type="date" class="form-control" required name="StartDate" id="StartDate" />
      </div>

      <div class="form-group col-lg-3">
        <label for="StartTime" style="margin: 0 0 15px 0;">Start Time: </label>
        <div class='input-group date' id='datetimepicker3'>
          <input name="StartTime" id="StartTime" type='text' required class="form-control" />
          <span class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </span>
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker3').datetimepicker({
              format: 'LT'
            });
          });
        </script>
      </div>

      <div class="form-group col-lg-3">
        <label for="StartDate">End Date: </label>
        <input type="date" required class="form-control" name="EndDate" id="EndDate" />
      </div>

      <div class="form-group col-lg-3">
        <label for="EndTime" style="margin: 0 0 15px 0;">End Time: </label>
        <div class='input-group date' id='datetimepicker4'>
          <input name="EndTime" id="EndTime" required type='text' class="form-control" />
          <span class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </span>
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker4').datetimepicker({
              format: 'LT'
            });
          });
        </script>
      </div>

    </div>

    <div class="row">

      <div class="form-group col-lg-3">
        <label for="riders_name">Riders Name: </label>
        <select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
      </div>

      <div class="form-group col-lg-3">
        <label for="horses_name">Horses Name : </label>
        <select class="form-control" style="height: 34px;" required name="horses_name" id="horses_name">
          <option value="">--Empty--</option>
        </select>
      </div>

      <div class="form-group col-lg-3">
        <label for="instructor_name">Instructor Name : </label>
        <select class="form-control" style="height: 34px;" required name="instructor_name" id="instructor_name">
          <option value="">--Empty--</option>
        </select>
      </div>

      <div class="form-group col-lg-3">
        <label for="groom_name">Groom Name : </label>
        <select class="form-control" style="height: 34px;" required name="groom_name" id="groom_name">
          <option value="">--Empty--</option>
        </select>
      </div>

    </div>

    <br>

    <div class="row">

      <div class="form-group col-lg-9">
        <label for="comments">Comments : </label>
        <textarea name="comments" id="comments" class="form-control"></textarea>
      </div>

      <div class="form-group col-lg-3">
        <label for="Repeat">Repeat : </label>
        <select class="form-control" style="height: 34px;" required name="Repeat" id="Repeat">
          <option value="0">none</option>
          <option value="1">Daily</option>
          <option value="2">Weekly</option>
          <option value="3">Monthly</option>
        </select>
      </div>

    </div>

    <div class="row">

      <div class="form-group col-lg-1">
        <button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
      </div>

      <div class="form-group col-lg-1">
        <button type="submit" class="btn btn-danger" name="cancel" id="cancel">Cancel</button>
      </div>

      <div class="form-group col-lg-5">
        &nbsp;
      </div>

      <div class="form-group col-lg-5">
        &nbsp;
      </div>

    </div>

  </form>

</div>

<script>
  $.getJSON("fullcalendar/getriders.php", function(data) {
    var select = $('#riders_name'); //combo/select/dropdown list
    if (select.prop) {
      var options = select.prop('options');
    } else {
      var options = select.attr('options');
    }
    $('option', select).remove();

    $.each(data, function(key, value) {
      options[options.length] = new Option(value['name'], value['id']);
    });
  });

  $.getJSON("fullcalendar/getinstructors.php", function(data) {
    var select = $('#instructor_name'); //combo/select/dropdown list
    if (select.prop) {
      var options = select.prop('options');
    } else {
      var options = select.attr('options');
    }
    $('option', select).remove();
    $.each(data, function(key, value) {
      options[options.length] = new Option(value['name'], value['id']);
    });
  });


  $.getJSON("fullcalendar/getgrooms.php", function(data) {
    var select = $('#groom_name'); //combo/select/dropdown list
    if (select.prop) {
      var options = select.prop('options');
    } else {
      var options = select.attr('options');
    }
    $('option', select).remove();
    $.each(data, function(key, value) {
      options[options.length] = new Option(value['name'], value['id']);
    });
  });
</script>

Answer 1

Выберите раскрывающийся список всегда выше z-index, установленный по умолчанию браузерами.У вас есть два ряда один под другим.Вы должны в верхней строке установить более высокое значение z-index с помощью position :lative;тогда я надеюсь, что все будет работать как положено.

Добавьте код CSS следующим образом:

.higher-z-index {
    postion: relative; // This line help z-index work relatively 
    z-index: 999;
}

Ваша разметка будет выглядеть примерно так:

<div class="row higher-z-index">
    .....
    ....
</div>
<div class="row">
    .....
    ....
</div>

Почему этот подход:

Вы должны иметь в виду, что это доза, независимо от того, какое значение z-индекса, примененное в селекторе .form-group, будет работать только для родственных элементов.Но в вашем случае он отстает от элементов следующей строки, потому что современные браузеры устанавливают по умолчанию более высокий z-index в каждом последующем элементе, пока мы не установим явно.Таким образом, под строкой получается более высокий z-индекс, чем у верхнего ряда.Таким образом, не имеет значения, сколько более высокого значения z-индекса применяется внутри контейнера верхнего ряда, все будет идти позади контейнера следующего ряда.

Answer 2

Я вижу несколько пустых <select></select> тегов в вашей форме.Я подозреваю, что вы планируете текстовые поля там?Если это так, вам нужно заменить <select></select> на <input type="text" />.

Например, это:

<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>

... должно быть:

<label for="riders_name">Riders Name: </label>
<input class="form-control" type="text" style="height: 34px;" required name="riders_name" id="riders_name" />