web-dev-qa-db-ja.com

Bootstrapモーダル内の誤った場所に表示される日付ピッカー

日付ピッカーを持つモーダルを呼び出すボタンがページにあります。

このボタンが上部にある場合（クリックしてページをスクロールする必要はありません）、モーダルが開き、datepickerが正しく表示されます。

しかし、このボタンがページの下にある場合（クリックしてページをスクロールする必要があるため）、モーダルが開き、datepickerが正しく表示されません。 （スクロールに関係がある場合はわからない）

jsfiddle

これが画像表示の問題です。datepickerはツールチップとして上に表示されるはずですが、それは下がっていきます： enter image description here

コードは次のとおりです。

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Contact</button>

<div class="modal fade" id="callModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <form role="form">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" placeholder="Enter name">
                </div>
                <div class="form-group">
                  <label for="contact">Contact</label>
                  <input type="text" class="form-control" id="contact" placeholder="Your mobile number">
                </div>
                <div class="row">
                  <div class='col-sm-6'>
                    <div class="form-group">
                      <label for="cal">Date &amp; Time</label>
                      <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" id="cal"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </div>
                  </div>
                   <script type="text/javascript">
                $(function () {
                  $('#datetimepicker1').datetimepicker();
                });
              </script>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-danger">Contact </button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

[〜＃〜] edit [〜＃〜]datetimepickerツールチップは、「Contact」ボタンをクリックする前にページをスクロールする量だけシフトしますdatetimepickerを含むモーダルを表示します。

javascriptcsshtml5twitter-bootstrapdatepicker
30
Insane Coder

私はちょうどこの同じ問題に出くわしました。 divにコンテナ属性を追加することで解決できました。

$('#myDatePicker').datepicker({
  container:'#myModalId'
});

または、私が「遅延ロード」メソッドを使用している場合：

<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'>

参照： http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

それが他の誰かに役立つことを願っています！

52
tjfo

入力のコンテナが相対的な位置にない場合、Datetimepickerは間違った場所に表示されます。

解決策は次のとおりです。

<div style="position:relative">
<div class='input-group date' id='datetimepicker1'>
</div>
14
Shadi Namrouti

Bootstrap 4.1.1。で使用すると、同じ問題が発生しました。datepickerポップオーバーがinput要素の上部に表示されていました。

このCSSを使用して修正しました。

/* fix bootstrap-datepicker positional bug */
.datepicker {
  transform: translate(0, 3.1em);
}
8
Diogo Capela

私の場合、日付ピッカーの位置は、divの親の1つが持っていたため、本来の位置よりも60px高くなりました。

margin-top: 60px;

の代わりに

padding-top: 60px;
3
Stéphane Bruckert

私の下で解決策は働いています

var datepicker = sandbox.dom('body').find('.bootstrap-datetimepicker-widget:last'),

position = datepicker.offset();

// Move datepicker to the exact same place it was but attached to the body
datepicker.appendTo('body');
datepicker.css({
    position: 'absolute',
    top: position.top,
    bottom: 'auto',
    left: position.left,
    right: 'auto'
});
2
AVANI PATEL

私にとって、これと関連する問題は、コードインスペクタウィンドウを開いていたことが原因であることが判明しました。通常のユーザーはこれをオンにすべきではないので、それがあなたの場合であればそれは問題ではありません。

0
Marcel

このソリューションは、bootstrap= modal。

http://jsfiddle.net/cmpgtuwy/654/

HTML

<br/>
<div class="wrapper">
Some content goes here<br />
Some more content.
<div class="row">
<div class="col-xs-4">

<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
<input type="text" class="form-control" />  
<span class="input-group-addon">
  <span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>

Javascript

$('#dtp').datetimepicker({
format: 'MMM D, YYYY',
widgetParent: 'body'});


$('#dtp').on('dp.show', function() {
      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
      if (datepicker.hasClass('bottom')) {
        var top = $(this).offset().top + $(this).outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
      else if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
    });

CSS

.wrapper {
height: 100px;
overflow: auto;}
body {
position: relative;
}
0
Adnan Boota