Предотвратить всплывающие окна за пределами экрана, изменив положение стрелки - PullRequest
Новая
       8

Предотвратить всплывающие окна за пределами экрана, изменив положение стрелки

0 голосов
/ 14 января 2019

Резюме

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

Stackblitz: https://stackblitz.com/edit/angular-xt18mj

Фон

Я использую ng-bootstrap (виджеты Bootstrap 4 для угловых). Мое приложение содержит панель инструментов, которая содержит несколько кнопок. Каждая кнопка представляет собой поповер: нажмите на нее, и под кнопкой отобразится соответствующий контент, как показано ниже.

Снимок экрана: https://i.imgur.com/hW8JhMW.png

Выпуск

Однако левое всплывающее окно находится за пределами экрана. В raw Bootstrap 4 Popper.js заметил бы это и отобразил всплывающее окно справа. Об этой ошибке сообщалось здесь .

Но я не хочу этого поведения, потому что я хочу, чтобы поповер оставался под панелью инструментов.

Я хочу найти способ сместить поповер вправо, удерживая стрелку под кнопкой, вот так: https://i.imgur.com/u0HqiPS.png

Я обновил CSS всплывающего окна (ngb-popover-window) следующим образом: 

element.style {
    top: 54px;
    // left: -80px;
    left: 0px !important;
}

Это корректно выравнивает поповер с его родителем (который расположен на relative).

Снимок экрана: https://i.imgur.com/O2WcDrz.png

Тем не менее:

  1. Стрелка не находится под кнопкой 1 (она остается на 50% ширины)
  2. Я хочу применить эту операцию, только если всплывающее окно находится за пределами экрана (в реальном приложении это зависит от левого поля панели инструментов, ширина которого составляет 2,5%, поэтому не фиксированное значение px)
  3. Popper.js динамически стирает значение left: 0px !important;, даже если добавлено !important, и устанавливает его обратно в вычисленное значение.
...