Bootstrap Datepicker cut off the bottom of screen


When clicking the datepicker input field, the viewport scrolls down to show the the calendar (as expected), however, the calendar view is cut off from the position at which the viewport was before it scrolled down.

I have tried changing the z-index to both large negative and positive values, it seems to have no effect. I have included a video link also for better demonstration.

screenshot of issue

HTML

<div class="form-group has-feedback col-xs-12 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4 has-feedback-left">
  <div id="specificday" class="specificday">
      <label for="specificdate" style="font-size: 13px;">What date?</label>
        <div class="input-group date specificdate">
          <input type="text" id="ebaySpecificDate" name="ebaySpecificDate" class="form-control" onkeydown="return false" onchange="return specificDateChanged()" readonly="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
      </div>
    </div>
</div>

JS

$('.input-group.date.specificdate').datepicker({
      format: "dd/mm/yyyy",
      maxViewMode: 1,
      todayBtn: "linked",
      autoclose: true,
      startDate: new Date(),
      todayHighlight: true
}).on('show', function(e){
      $('.datepicker').css("top", $('#ebaySpecificDate').offset().top+35);
      $('.datepicker').css("z-index", 1151);
}); 

Video
https://drive.google.com/file/d/1GzY8msZGy890dc8BHwWUl0zEhIkWGdcI/view?usp=sharing

Source: JavaSript – Stack Overflow

September 1, 2021
Category : News
Tags: bootstrap-4 | javascript | jquery | user-interface

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.