Позиционирование Angular Загрузочный пользовательский интерфейс Datepicker
У меня есть "небольшая" проблема с угловым утилизатором. Мне нужно как-то указать, если вход с прикрепленным дампикером должен показывать всплывающее окно из нижнего левого угла ввода (по умолчанию)
![enter image description here]()
или если я хочу его из нижнего правого угла входа. Это связано с тем, что на странице, которую я создаю, мой вход действительно близок к правой стороне страницы, и когда я присоединяю datepicker, это происходит (датапик режет и теперь появляется горизонтальная прокрутка):
![enter image description here]()
но дело в том, что мне нужна датапикер в обеих позициях (в зависимости от случая, связанного с изображениями).
Кто-то знает, как это можно исправить? Я попытался изменить атрибут 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;
}
}