PrimeNG p-tree Горизонтальная полоса прокрутки скрыта, пока я не прокручиваю вниз к нижней части div - PullRequest
Новая
       6

PrimeNG p-tree Горизонтальная полоса прокрутки скрыта, пока я не прокручиваю вниз к нижней части div

0 голосов
/ 15 апреля 2020

Это копия / вставка с форумов PrimeNG, где я еще не был «одобрен», чтобы задавать вопрос, поэтому я решил, что я ТАК попробую.

Я искал везде, и я Я удивлен, узнав, что кажется, что я единственный человек, который столкнулся с этой проблемой. В другом посте SO было предложение использовать PrimeNG DataTable для использования свойств [scrollable], но scrollable не является свойством p-дерева.

В любом случае, моя проблема. У меня есть компонент p-дерева с большим списком иерархических объектов. Когда я расширяю их до точки, где отображается вертикальная полоса прокрутки, все в порядке. Однако когда я расширяю еще несколько узлов, чтобы переполнение шло вправо, горизонтальная полоса прокрутки скрыта. Только до тех пор, пока я не прокручиву весь путь вниз к нижней части дерева, я не смогу увидеть горизонтальную полосу прокрутки. Я перепробовал все виды CSS модов и поиграл с диваном ui-tree с inspect, но я не могу найти ничего, что, кажется, работает.

2 Примечания: Изменение переполнения: автоматически на переполнение: видимый просто полностью удаляет вертикальную полосу прокрутки, а содержимое уходит на юг к забвению, за пределы видимой страницы. Изменение переполнения на прокрутку создает горизонтальную полосу прокрутки, но это просто пустая полоса, и мне нужно прокрутить вниз, чтобы увидеть фактическую полосу прокрутки.

Вот мое дерево пользовательского интерфейса CSS: 

:host ::ng-deep .ui-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding-right: 5px;
  width: 22em;
  max-height: 75vh;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Я использую последнюю версию PrimeNG с PrimeIcons по состоянию на 1 апреля с Angular 9. К сожалению, я не могу опубликовать свой код и / или HTML из-за проблем с правами собственности, но если ни у кого нет решения, я мог бы создать fiddle / stackblitz / plunkr, но это займет некоторое время, но я сделаю это при необходимости.

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

Любая помощь или предложения приветствуются!

Спасибо.

1 Ответ

0 голосов
/ 20 апреля 2020

Решил мою собственную проблему, хотя это выглядит немного грязно и хаки sh. Оставьте это здесь на случай, если кто-то еще столкнется с этой проблемой или найдет более элегантный способ решить ее без связки: host и :: ng-deep, поскольку они уходят в какой-то момент в будущем.

I в итоге пришлось создать дополнительные CSS правила для следующего: 

:host ::ng-deep .ui-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding: 0em 0em;
  padding-right: 5px;
  width: 22em; /* This constrains the width and creates the horizontal scrollbar when a p-tree node is expanded past this width. */
  line-height: 15px !important;
  max-height: 75vh;
  overflow: overlay; /* Changed from auto to overlay */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* This creates the horizontal scrollbar visible on top of the inner divs */
:host ::ng-deep .ui-tree .ui-tree-container {
  overflow: initial;
}

/* This keeps a margin between horizontal overflow and the vertical scrollbar. Without it content would be hidden behind the scrollbar */
:host ::ng-deep .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
  margin-right: 10px;
}
...