Датапикер начальной загрузки скрыт контейнером div

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

Форма находится внутри <div class="media"> контейнера. Как показано на рисунке, календарь datepicker скрыт рамкой div "media", я не могу решить эту проблему с помощью z-index, это не сработало. Когда я использую overflow: visible как для class: 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; введите описание изображения здесь


css twitter-bootstrap-3 bootstrap-datepicker eonasdan-datetimepicker
person Community    schedule 28.09.2016    source источник

Ответы (2)


arrow_upward
8
arrow_downward

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

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

person bbodien    schedule 28.09.2016
comment
это как-то устранило мою основную проблему, но дисплей изменен, см. мое обновление - person ; 28.09.2016
comment
@ user2997418 Похоже, что использование float для вашего макета для обеспечения левой навигации тоже может потребовать некоторого обновления, но мне нужно увидеть CSS и HTML для всей страницы, чтобы иметь возможность помочь. - person bbodien; 28.09.2016
comment
Я не вижу никакого числа с плавающей запятой, я написал весь свой код и CSS, второй - bootstap.css и .js - person ; 28.09.2016
comment
@ user2997418, можете ли вы обновить вопрос с помощью CSS для контейнеров навигации и формы? Похоже, что overflow: hidden использовался для очистки поплавков, что не является хорошей практикой, поскольку имеет побочные эффекты (например, вызывает вашу исходную проблему). - person bbodien; 28.09.2016
comment
@ user2997418 Что произойдет, если вы измените pull-left в контейнере вокруг навигации на media-left? - person bbodien; 28.09.2016
comment
он отображает мобильный макет, кнопки вверху и содержимое вкладки внизу - person ; 28.09.2016
comment
@ user2997418 похоже, что вы неправильно используете разметку / стили Bootstrap. Вы используете медиа-объект, который должен содержать media-left и media-body. Ответ на ту же исходную проблему скрытого переполнения был дан здесь: stackoverflow.com/questions/29466204/ - другие проблемы, возникающие в результате этого исправления, представляют собой отдельные проблемы, поэтому я предлагаю вам оставить там overflow: visible, а затем отладить свой макет. - person bbodien; 28.09.2016

arrow_upward
2
arrow_downward

Вы можете попробовать это

$('selector').datetimepicker().on('dp.show',function(){
    $('.media').css({'overflow':'visible'});
}).on('dp.hide',function(){
    $('.media').css({'overflow':'hidden'});
})
person trungbadao    schedule 16.10.2020
comment
Это должен быть принятый ответ imo. Это общее решение, позволяющее избежать отсечения, хотя, если контент прокручивается, позиция будет сброшена. - person Johncl; 12.02.2021