Позиционирование Угловой пользовательский бутстрап Datepicker

Question

У меня возникла «маленькая» проблема с угловым юпитером. Мне нужно, чтобы указать, каким-то образом, если вход с DatePicker присоединять, должно показать всплывающее окно с правом нижнем левом углу входа (по умолчанию)

или если я хочу его с правой нижней вместо угла ввода. Это связано с тем, что на странице, которую я создаю, мой вход действительно близок к правой стороне страницы, и когда я присоединяю datepicker, это происходит (датапикер разрезается и теперь отображается горизонтальная прокрутка):

, но дело в том, что мне нужна датапикер в обоих положениях (в зависимости от случая, связанного с изображениями).

Кто-то знает, как это можно исправить? Я попытался изменить атрибут left, который является встроенным в всплывающем шаблоне datepicker, но он всегда является фиксированным значением, и я полагал, что это не реальный вариант.

Благодаря

Answer 1

Если вы хотите реализовать общее решение, это то, что не может быть достигнуто только за счет изменения шаблона в datepicker-popup.

Вы должны изменить updatePosition функции внутри директивы, так что scope.position.left равно что-то вроде этого:

scope.position.left += scope.position.width - $position.position(popupEl).width; 

Но опять же, вы должны быть уверены, что вы «читать» ширину popuEl после его видимо, иначе вы получите нуль. Кроме того, если вы перейдете в другой режим (выбор месяца или года), позиция не будет обновляться, хотя ширина всплывающего окна может измениться.

Я просто хочу сказать, что эта особенность не меняется ни на одну, ни две линии, и, вероятно, лучше открыть запрос для этого в https://github.com/angular-ui/bootstrap/issues?state=open. Кто-то, возможно, захочет расследовать это дальше!

Answer 2

Да я взломал мой угловой ui.0.7.0.tpls.js файл, как описан выше, и она работала очень хорошо:

function updatePosition() { 
    scope.position = appendToBody ? $position.offset(element) : $position.position(element); 
    scope.position.top = scope.position.top + element.prop('offsetHeight'); 

    var padding = 20; //min distance away from right side 
    var width = popupEl.outerWidth(true); 
    var widthOver = $('body').outerWidth(true) - (scope.position.left + width + padding); 

    if(widthOver < 0) { 
     scope.position.left = scope.position.left + widthOver; 
    } 
} 

Answer 3

Это CSS решение может быть проще, чем изменения/взлома вашего углового .js файлы:

Оберните DatePicker в DIV, а затем переопределить маржинальную CSS класс .dropdown-меню в Datepicker в:

<div id="adjust-left"> 
    <your-datepicker-here/> 
<div> 

Тогда в CSS:

#adjust-left .dropdown-menu{ 
    /* Original value: margin: 2px 0 0; */ 
    margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */ 
} 

Answer 4

https://github.com/angular-ui/bootstrap/issues/1012

Гадкий хак:

<div class="hackyhack"> 
    <input datepicker-popup="..."> 
</div> 

Магия CSS:

.hackyhack { 
    position: relative; 
} 
.hackyhack .dropdown-menu { 
    left: auto !important; 
    right: 0px; 
} 

Answer 5

Теперь последний угловой пользовательский интерфейс 1,2.0 в версиях есть опция popup-placement в настройках uib-datepicker-popup.

Краткое резюме из документов.

всплывающего размещение (по умолчанию: авто внизу слева, Config: «Размещение») - Переходя в «авто», разделенном пробелом перед размещением будет включить автоматическое позиционирование, например: «авто снизу -оставил". Всплывающее окно будет попытаться позиционировать, где он подходит в ближайшем прокручиваемом предке. Принимает:

верх - всплывающее окно сверху, горизонтально с центром на входном элементе.

верхний левый - всплывающее окно сверху, левый край выровнен с элементом ввода левого края.

верхний правый - всплывающее окно сверху, правый край выровнен с входным элементом правый край.

bottom - всплывающее окно, горизонтально по центру ввода элемент.

внизу слева - всплывающее окно внизу, левый край выровненный с вводом элемент левый край.

внизу справа - всплывающее окно внизу, правый край выровненный с входным элементом правый край.

левый - всплывающее окно слева, вертикально с центром на входе элемент.

левый верх - всплывающее окно слева, верхний край выровненный с элементом ввода верхний край.

левый нижний - всплывающее окно слева, нижний край выровненный с входным элементом нижний край.

правый - всплывающее окно справа, вертикально центрированное на входном элементе.

правый верх - всплывающее окно справа, верх край выровненный с элементом ввода верхний край.

правая нижняя - всплывающее окно на справа, нижний край выровнен с нижним краем входного элемента.

В вашем случае, я думаю, bottom-right будет работать.

играть с this plunker для получения более подробной информации.