Dropdown Bootstrap'а проваливается под узлы Treeflex'а

Рейтинг: 0Ответов: 1Опубликовано: 26.04.2023

Использую Treeflex CSS библиотеку для построения иерархического древа, а конкретно мой случай это последний кейс с Ancestor tree среди примеров. Нужно встроить bootstrap'овский dropdown во все узлы, однако при раскрытии содержимого есть проблема:

введите сюда описание изображения

Содержимое дропдауна может "наезжать" на другие узлы и часто "проваливается" под него. Изменение z-index'а не помогает. Из того, что вычитал, понял, что z-index в принципе не работает при применении transform, без него такой проблемы у дропдаунов нет, но без него не построить дерево от "ребенка" к "родителям". Какой выход может быть из такой ситуации?

css bootstrap bootstrap4
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Итак, проблему я решил. Вместо применения трансформации я воспользовался свойством flex-direction: column-reverse - это помогло, нужно лишь еще подкорректировать свойства рамок и позиционирования для них. Вот что примерно получилось в SASS формате:

.tf-tree {
  // ...
  &.tf-ancestor-tree {
    li {
      flex-direction: column-reverse;

      ul {
        margin-top: unset;
        margin-bottom: ($treeflex-node-gap * 2);
      }

      li:only-child > .tf-nc:before {
        top: unset;
        bottom: calc(#{-$treeflex-node-gap} - #{$treeflex-connector-width * 2});
      }

      li:before {
        top: unset;
        bottom: calc(#{-$treeflex-node-gap} - #{$treeflex-connector-width / 2});
      }
    }

    .tf-node-content, .tf-nc {
      &:before {
        top: unset;
        bottom: calc(#{-$treeflex-node-gap} - #{$treeflex-connector-width / 2});
      }

      &:after {
        top: unset;
        bottom: calc(100% + #{$treeflex-connector-width / 2});;
      }
    }
  }
}

Но после этого возникла другая проблема: dropdown'ы начали "обрезаться" внутри tf-tree из-за значения свойства overflow. К dropdown'ам пришлось добавить два атрибута: data-container="body" и data-popper-config='{"positionFixed":true}'. Это в целом помогло.