Bootstrap datepicker, спрятанный контейнером div

Question

У меня есть текст ввода на день рождения, где я использую Bootstrap datepicker v4.

Форма внутри <div class="media"> контейнер. Как показано на рис., Календарь datepicker скрыт границей «media» div, я не могу решить это с помощью z-index, это не сработало. Когда я использую overflow: visible для класса: media и tab-content, поля потеряли свою ширину, а макет дисплея изменился (см. Второй рис.).

<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 

<div class="tab-wrap"> 
    <div class="media"> 
    <div class="parrent pull-left"> 
     <ul class="nav nav-tabs nav-stacked"> 
     <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><?= lang('BASIC_INFO'); ?></a></li> 
     <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02"><?= lang('PUBLIC_PROFILE'); ?></a></li> 
     <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><?= lang('INTERESTS'); ?></a></li> 
     <li class=""><a href="#tab4" data-toggle="tab" class="tehnical"><?= lang('FOTOS'); ?></a></li> 
     </ul> 
    </div> 

    <div class="parrent media-body"> 
     <div class="tab-content"> 
     <div class="tab-pane fade active in" id="tab1"> 
      <div class="media">  
      <div class="media-body">  
       <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' id='bdate' name='bdate' class="form-control" value="<?= $userProfile ? $userProfile['bdate'] : '' ?>"/> 
        <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Результат после судится overflow: visible;

Answer 1

Посмотрите на overflow: hidden; на родительских контейнеров, таких как .media, и посмотреть, если вы можете переопределить или удалить его, если он установлен (overflow: visible; будет переопределение).

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