6

Bootstrap datepicker v4 を使用する誕生日入力テキストがあります。

フォームは<div class="media">コンテナ内にあります。写真に示すように、datepicker カレンダーは「メディア」div の境界線によって隠されています。これを z-index で解決することはできません。うまくいきませんでした。メディアとタブコンテンツの両方のクラスに使用するoverflow: visibleと、フィールドの幅が失われ、表示レイアウトが変更されます (2 番目の写真を参照)。

<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; ここに画像の説明を入力

4

2 に答える 2

9

overflow: hidden;などの親コンテナーを探し、.mediaそれをオーバーライドできるかどうか、または設定されている場合は削除できるかどうかを確認overflow: visible;します (オーバーライドになります)。

完全な CSS がどのように見えるかわからないので推測していますが、z-index使用したルールが Bootstrap の CSS よりも具体的ではないため、適用しようとしたものがオーバーライドされている可能性があります。ブラウザの開発者ツールで適用されたスタイルをチェックして、指定したスタイルがz-index優先されていることを確認してください。

于 2016-09-28T12:01:21.140 に答える