Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Datepicker positioned on the left top corner of the page

See original GitHub issue

Extended issue explanation is here: http://stackoverflow.com/questions/40780204/bootstrap-datepicker-positioned-on-the-left-top-corner-of-the-page

Expected behaviour

On click on the input, datepicker should be positioned near the input element.

Actual behaviour

Datepicker positioned on the left top corner of the page

Datepicker version used

Tested with latest stable and v1.7.0-dev.

Example code

Yo can view example page here: https://abonent.pskovregiongaz.ru/Gro/AskForVDGO Code below was cleared from unneccesary details.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>    
    <link href="../Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js -->
    <script type="text/javascript" src="/Scripts/jquery.min.js"></script>
    <!-- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js -->
    <script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

    <!-- Datepicker -->
    <link rel="Stylesheet" href="/Content/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="/Scripts/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap-datepicker.ru.min.js"></script>

</head>

<body>
    <form action="/Gro/AskForVDGO" id="form0" method="post">
    <div class="form-group">
        <label for="BirthDate">Дата рождения</label>
        <input class="text-box single-line form-control" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" />
    </div>
    <p>
        <input type="submit" class="btn btn-success btn-lg btn-block" value="Отправить" title="Отправить" /></p>
</form>
<script type="text/javascript">
  $(function() {
      $('#BirthDate').datepicker({
          format: "mm.dd.yyyy",
          startDate: "-100y",
          language: "ru",
          orientation: "auto",
          autoclose: true,
          todayHighlight: true,
          toggleActive: true,
          defaultViewDate: { year: 2016, month: 1, day: 1 }
      });
  });
</script>
</body></html>

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:7

Top GitHub Comments

3reactions

MalakhovIcommented, Dec 7, 2016

@vasyaabr i have same issue. It happens because you use: body{ margin: 0 auto; } current version calculate this margin value wrong. ugly fix for it - in bootstrap-datepicker.js - >place: function(): var left = offset.left - appendOffset.left, replace it on: var left = offset.left,

0reactions

Valachiocommented, Feb 4, 2018

@MalakhovI Is there a similar fix for the bootstrap-datepicker.min version? The code does not exist in that version.

Top Results From Across the Web

Bootstrap-datepicker positioned on the left top corner of the ...

When clicking on the date input , datepicker popup opens in the top left corner of the page, not near the input element....

Bootstrap-datepicker positioned on the left top corner of the ...

I'm using bootstrap-datepicker from https://github.com/uxsolutions/bootstrap-datepicker (with twitter-bootstrap 3 ). When clicking on the date input ...

Datepicker Display Issue - Power Platform Community

When clicking on the datepicker to choose a date, the dates display at the top left hand corner of the app and not...

Create date picker component - MATLAB uidatepicker

Create a date picker in the upper left corner of a UI figure. fig = uifigure('Position',[500 500 320 280]); d = uidatepicker(fig,'Position',[18 235...

Positioning Ionic popovers | Damir's Corner

In a recent blog post, I described how to make the date picker in Ionic ... The !important property is used with top...