Как сделать чтобы datepicker не уезжал вниз?

Question

[coderisimo]

Вопрос от нуба.
Есть вот такая страница

два верхних datepicker'а отображаются нормально.
возникла необходимость по клику на ячейке таблицы на лету создавать еще один datepicker и отображать его там же.
Пока набросал идею вот так :

$('body').on('dblclick','.price-date-column',function(){
           var content = '<div class="input-group date"><input type="text" class="form-control input-price-date"></span></div>';
          $(this).html(content);
     var t =  $(this).find('input').datetimepicker({
          pickTime: false,
          format: 'MM-DD-YYYY'});
    //$('.bootstrap-datetimepicker-widget').addClass('blinnnnn');
  });

т.е по дабл-клику на ячейке таблицы генерирую инпут, добавляю его в ячейку, создаю datepicker. Затем буду так же на лету возвращать таблице исходный вид , получив новое значение даты. Все вроде нормально, НО созданный таким образом datepicker в процессе работы с ним отображается ДАЛЕКО внизу. Пробовал использовать widgetPositioning. Никакого эффекта.
В общем, придумал добавлять к ".bootstrap-datetimepicker-widget" свой класс, где жестко приписаны все стили (положение на странице), затем после завершения работы с datepicker-ом буду его (этот дополнительный класс) удалять, чтобы остальные datepicker-ы , те что сверху отображались корректно.
Решение мне не очень нравится. И вообще непонятно, что за ..... ? Как сее победить?
Спасибо за квалифицированные мнения, если таковые последуют .

Answer 1

[coderisimo]

Итак, с трудом разгребая предложенные здесь варианты решения, предлагаю свой ))
После разнообразных ухищрений , самый простой метод лечения , имхо , добавить в стили :

.bootstrap-datetimepicker-widget{
        top:auto!important;
    }