Datepicker positioned on the left top corner of the page

vasyaabr commented 7 years ago

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>

gflood commented 7 years ago

hi

you could try adding an id to the <div class="form-group"> so it becomes <div class="form-group" id="birthDateContainer"> and then add container: '#birthDateContainer' to the datepicker function so it becomes

$(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 },
          container: '#birthDateContainer'
      });
  });

that should do it... well it did for me anyway.

vasyaabr commented 7 years ago

Sorry, but it didn't work :( Datepicker still positioned on the left top corner of the page.

MalakhovI commented 7 years ago

@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,

vasyaabr commented 7 years ago

Yesssss! @MalakhovI , you save me :)

abeverley commented 7 years ago

uxsolutions / bootstrap-datepicker