Bootstrap datepicker hidden by the container div

Question

I have a birthday input text where I use Bootstrap datepicker v4.

The form is inside <div class="media"> container. As shown in the pic, the datepicker calendar is hidden by the border of the "media" div, I can't solve this with z-index, it didnt work. When I use overflow: visible for both class: media and tab-content, The fields lost their width and the display layout is changed (see second pic).

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

Result after suing overflow: visible;

Laurence

Answer 1

Look for overflow: hidden; on the parent containers such as .media, and see if you can override that or remove it if it's set (overflow: visible; would be the override).

I'm just guessing as I don't know what your complete CSS looks like, but another possibility might be that the z-index you tried applying is being overridden because the rule you used is less specific than the one in Bootstrap's CSS. Check the applied styles in your browser developer tools to verify that the z-index you provided is taking precedence.

Frans

it somehow fixed my main issue but the display is modified, see my update – Laurence

@Laurence It looks like your use of float for your layout to achieve the left-hand navigation might need some updating too, but I'd need to see the CSS and HTML for the whole page to be able to help. – Frans

I don't see any float, I wrote all my code, and the CSS, the other is bootstap.css and .js – Laurence

@Laurence can you update the question with the CSS for the containers of the navigation, and the form? It seems like overflow: hidden was being used to clear floats, which isn't good practice as it has side effects (such as causing your original problem). – Frans

@Laurence What happens if you change pull-left on the container around your navigation to media-left? – Frans

it displays the mobile layout, the buttons on the top and the tab-content on the bottom – Laurence

@Laurence it sounds like you're mis-using Bootstrap's markup/styles. You're using a media object which should contain media-left and media-body. The same original problem of overflow hidden was answered here: #29466704 - other issues that arise from this fix are separate problems, so I'd suggest you leave overflow: visible in there and then debug your layout. – Frans

Answer 2

You can try this

$('selector').datetimepicker().on('dp.show',function(){
    $('.media').css({'overflow':'visible'});
}).on('dp.hide',function(){
    $('.media').css({'overflow':'hidden'});
})

Kunin

Answer 3

Follow up to @trungbadao answer, we need to set overflow as hidden even when there is an update to the datetimepicker, so his answer can be updated like this:

$('selector').datetimepicker().on('dp.show',function(){
    $('.media').css({'overflow':'visible'});
}).on('dp.hide',function(){
    $('.media').css({'overflow':'hidden'});
}).on('dp.change',function(){
    $('.media').css({'overflow':'hidden'});
})

Acinus

Answer 4

I had an ancestor which was positioned relative, overflow-x, and hidden, so I made its direct parent .date position static, and the actual date/time picker position fixed.

.date{
    position: static;
}

.bootstrap-datetimepicker-widget{
    position:fixed
}

 $(".date").datetimepicker({
    locale: "{{ LANGUAGE_CODE }}-ca",
    keepOpen: false,
    format: "YYYY-MM-DD HH:mm",
  });

Rodd