web-dev-qa-db-de.com

Bootstrap Datepicker wird an einer falschen Stelle in einem Modal angezeigt

Ich habe eine Schaltfläche auf einer Seite, die einen Modal mit Datumsauswahl aufruft.

Wenn sich diese Schaltfläche oben befindet (ich muss keine Seite scrollen, um zu klicken), wird das modale Fenster geöffnet und das Datumsauswahlfeld wird korrekt angezeigt.

Wenn diese Schaltfläche jedoch auf der Seite niedriger ist (damit ich zum Blättern die Seite scrollen muss), wird Modal geöffnet und Datumsanzeige wird falsch angezeigt (NICHT SICHER, wenn beim Scrollen eine Beziehung besteht)

Hier ist die jsfiddle

Hier ist das Problem bei der Bildanzeige, der Datumsauswahl-Assistent sollte oben als Tooltip angezeigt werden, geht aber nach unten: enter image description here

Hier ist der Code:

<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 Der Tool-Tipp für Datentimepicker wird um den Betrag verschoben, um den ich die Seite scrolle, bevor Sie auf die Schaltfläche "Kontakt" klicken, um das Modal mit dem Datentimepicker anzuzeigen. 

javascriptcsshtml5twitter-bootstrapdatepicker
25
Insane Coder

Ich bin gerade auf dieses Thema gestoßen. Ich konnte es lösen, indem ich dem div ein Containerattribut hinzufügte. 

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

oder wenn Sie die "Lazy Load" -Methode so verwenden wie ich war:

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

Referenz: http://bootstrap-datepicker.readthedocs.org/de/latest/options.html

Hoffe es hilft jemand anderem!

46
tjfo

Datetimepicker wird an einer falschen Stelle angezeigt, wenn der Container der Eingabe nicht relativ positioniert ist.

Die Lösung ist:

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

Ich hatte das gleiche Problem bei der Verwendung von Bootstrap 4.1.1. Das Datepicker-Popover wurde oben auf dem Eingabeelement angezeigt.

Ich habe es mit diesem CSS behoben:

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

In meinem Fall war die Position des Datepickers 60px höher als er hätte sein sollen, da einer seiner div Eltern hatte:

margin-top: 60px;

anstatt

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

Bei mir funktioniert die Lösung

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

Für mich stellte sich dies und die damit verbundenen Probleme heraus, weil ich das Code-Inspector-Fenster geöffnet hatte. Regelmäßige Benutzer sollten dies nicht aktiviert haben. Wenn dies der Fall ist, ist dies kein Problem. 

0
Marcel

Diese Lösung funktionierte perfekt für mich, um den Datepicker auf Bootstrap-Modal zu rendern.

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