Bootstrap datetimepicker отключен внутри поля содержимого вкладки

Question

Я использую eonasdan-bootstrap-datetimepicker. Пожалуйста, смотрите фото здесь первым:

1. DateTimePicker находится в табуляциях содержания управления Bootstrap и отрезан от верхнего края.
   
   скриншот без Ьг тегов
   
   

2. Слой Ьг тегов добавить отступы, что позволяет полностью DateTimePicker раскрыть себя.
   
   скриншот Ьг тегов включен
   
   

Вот разметка формы без Ьг тегов ниже форм-группы:

<form class="form-horizontal mt-sm" action='' method="POST"> 
    <fieldset>  
     <div class="form-group"> 
      <label for="expiration-date" class="control-label col-md-3">Expiration Date</label> 
      <div class="col-md-8"> 
       <div class="col-md-10"><input type="text" id="expiration-date" class="form-control"></div> 
      </div> 
     </div> 
    </fieldset> 
</form> 

Вот скрипты:

<script src="/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script> 
<script src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
<script src="/lib/select2/select2.min.js"></script> 
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /> 

Answer 1

Вопрос в том, что z-index ваших вкладок выше, чем пользовательский интерфейс выбора даты. Чтобы решить эту проблему, вы должны увеличить z-индекс пользовательского интерфейса выбора даты.

.datepicker { 
    z-index: 1151; 
} 

Убедитесь, что вы измените селектор, чтобы быть более конкретным, необходимых .datepicker элементов. Также убедитесь, что этот стиль имеет приоритет. В моем случае мне пришлось использовать z-index: 1151 !important; Но я не рекомендую его, если вы не можете получить эту работу без !important.