CODEWITHSUNDEEP
javascriptcsshtmltwitter-bootstrapdatepicker
InsaneCoder
InsaneCoder

Reputation: 8288

Bootstrap Datepicker appearing at incorrect location in a modal

I have a button on a page that calls a modal having datepicker.

If this button is at top (I don't have to scroll page to click), modal opens and datepicker displays correctly.

But if this button is lower on the page( so that I have to scroll page to click), modal opens and datepicker displays incorrect. (NOT SURE if scrolling has a relation)

Here's the jsfiddle

Here's the image displaying problem, the datepicker should display above as a tooltip, but it goes down : enter image description here

Here's the 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 The datetimepicker tooltip is shifted by the amount by which I scroll the page before clicking the button "Contact" to appear the modal containing the datetimepicker.

Upvotes: 45

Views: 87533

Answers (9)

NikKova
NikKova

Reputation: 1

Try this:

$(".yourInputField").on("click", function() {
    var offsetModal = $('#yourModalID').offset().top;
    var offsetInput = $(this).offset().top;
    var inputHeight = $(this).height();
    var customPadding = 17; //custom modal padding (bootstrap modal)! 
    var topDatepicker = (offsetInput + inputHeight + customPadding) - offsetModal;
  $("#ui-datepicker-div").css({top: topDatepicker});
});

Upvotes: 0

ligoriky
ligoriky

Reputation: 1

Try this, maybe is not the most elegant solution but for me it worked

  //fixing scroll issue on datepicker
  $(".ui-datepicker-trigger").on("click", function() {
      $("#ui-datepicker-div").css({top: xxx});
  });

Upvotes: 0

Adnan Boota
Adnan Boota

Reputation: 181

This solutions worked perfectly for me to render the datepicker on top of 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;
}

Upvotes: 0

Diogo Capela
Diogo Capela

Reputation: 6580

I had the same problem when using it with Bootstrap 4.1.1. The datepicker popover was appeareing on to the top of the input element.

I fixed it using this CSS:

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

Upvotes: 14

AVANI PATEL
AVANI PATEL

Reputation: 21

For me below solution is working

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'
});

Upvotes: 2

St&#233;phane Bruckert
St&#233;phane Bruckert

Reputation: 22943

In my case the position of the datepicker was 60px higher than it should have been, because one of its div parents had:

margin-top: 60px;

instead of

padding-top: 60px;

Upvotes: 5

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13298

Datetimepicker will show in a wrong place if the container of the input is not positioned relative.

The solution is:

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

Upvotes: 28

Marcel Gruber
Marcel Gruber

Reputation: 7515

For me, this and related issues turned out to be because I had the code inspector window open. Regular users shouldn't have this on, so if that's your case it's a non issue.

Upvotes: 1

tjfo
tjfo

Reputation: 1189

I just ran into this same issue. I was able to solve it by adding a container attribute to the div. 

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

or if you are using the "lazy load" method as I was:

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

Reference : http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

Hope it helps someone else!

Upvotes: 72

Related Questions