6

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>

enter image description here

Result after suing overflow: visible; enter image description here

VincenzoC
  • 30,117
  • 12
  • 90
  • 112

3 Answers3

9

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.

bbodien
  • 1,062
  • 2
  • 10
  • 20
  • it somehow fixed my main issue but the display is modified, see my update –  Sep 28 '16 at 12:15
  • @user2997418 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. – bbodien Sep 28 '16 at 12:21
  • I don't see any float, I wrote all my code, and the CSS, the other is bootstap.css and .js –  Sep 28 '16 at 12:34
  • @user2997418 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). – bbodien Sep 28 '16 at 12:38
  • @user2997418 What happens if you change `pull-left` on the container around your navigation to `media-left`? – bbodien Sep 28 '16 at 12:59
  • it displays the mobile layout, the buttons on the top and the tab-content on the bottom –  Sep 28 '16 at 13:20
  • @user2997418 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: http://stackoverflow.com/questions/29466204/bootstrap-datetimepicker-calendar-is-not-visible - 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. – bbodien Sep 28 '16 at 14:00
3

You can try this

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

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'});
})
Ram
  • 451
  • 10
  • 18