Позиционирование Angular Загрузочный пользовательский интерфейс Datepicker

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

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

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

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

Спасибо

Ответ 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 Кто-то, возможно, захочет изучить это дальше!

Ответ 2

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;
 }

Ответ 3

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

Оберните свой datepicker в div и затем переопределите маркер CSS класса datepicker.dropdown-menu:

<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 */
}

Ответ 4

Теперь последние версии angular -ui версии 1.2.0 имеют параметр popup-placement в настройках uib-datepicker-popup.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

играйте с этот плункер для более подробной информации.

Ответ 5

Да, я взломал файл angular -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;
    }
}