web-dev-qa-db-fra.com

Bootstrap Datepicker apparaissant à un emplacement incorrect dans un modal

J'ai un bouton sur une page qui appelle un modal ayant datepicker.

Si ce bouton est en haut (je n'ai pas besoin de faire défiler la page pour cliquer), le mode modal s'ouvre et le sélecteur de date s'affiche correctement.

Mais si ce bouton est plus bas sur la page (de sorte que je dois faire défiler la page pour cliquer), le modal s'ouvre et le sélecteur de date affiche une valeur incorrecte . (PAS SÛR si le défilement a une relation)

Voici le jsfiddle

Voici le problème d'affichage d'image, le sélecteur de date devrait s'afficher ci-dessus sous forme d'infobulle, mais il disparaît: enter image description here

Voici le 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 L'info-bulle datetimepicker est décalée de la quantité de défilement de la page avant de cliquer sur le bouton "Contact" pour afficher le modal contenant le datetimepicker. 

javascriptcsshtml5twitter-bootstrapdatepicker
25
Insane Coder

Je viens de rencontrer ce même problème. J'ai pu résoudre ce problème en ajoutant un attribut conteneur à la div. 

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

ou si vous utilisez la méthode "charge paresseuse" comme j'étais:

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

Référence: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

J'espère que ça aide quelqu'un d'autre!

46
tjfo

Datetimepicker s'affichera au mauvais endroit si le conteneur de l'entrée n'est pas positionné par rapport.

La solution est:

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

J'ai eu le même problème lorsque je l'utilisais avec Bootstrap 4.1.1. Le popover datepicker apparaissait au sommet de l'élément d'entrée.

Je l'ai corrigé en utilisant ce CSS:

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

Dans mon cas, la position du sélecteur de date était 60px supérieure à ce qu'elle aurait dû être, car l'un de ses parents div avait:

margin-top: 60px;

au lieu de

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

Pour moi, la solution ci-dessous fonctionne

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

Pour moi, cela et les problèmes connexes se sont avérés être dus au fait que la fenêtre de l'inspecteur de code était ouverte. Les utilisateurs réguliers ne devraient pas l'avoir sur cette page, donc si c'est votre cas, le problème ne se pose pas. 

0
Marcel

Cette solution a parfaitement fonctionné pour moi pour rendre le sélecteur de date au-dessus du modal bootstrap.

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