컨테이너 div에 의해 숨겨진 부트 스트랩 datepicker

부트 스트랩 datepicker v4를 사용하는 생일 입력 텍스트가 있습니다.컨테이너 div에 의해 숨겨진 부트 스트랩 datepicker

양식은 <div class="media"> 컨테이너 안에 있습니다. 그림에서 알 수 있듯이 datepicker 달력은 "media"div의 경계에 의해 숨겨져 있습니다. Z- 색인으로이 문제를 해결할 수는 없습니다. overflow: visible을 미디어 및 탭 콘텐츠 모두에 사용하면 필드의 너비가 줄고 표시 레이아웃이 변경됩니다 (두 번째 그림 참조).

<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>