Как настроить положение раскрывающегося меню в соответствии с размером поля (семейное дерево CSS3) - PullRequest
Новая
       18

Как настроить положение раскрывающегося меню в соответствии с размером поля (семейное дерево CSS3)

0 голосов
/ 26 февраля 2020

У меня есть генеалогическое дерево css3, которое, когда вы нажимаете на поле, появляется раскрывающееся меню.

Вопрос 1

Я пытаюсь сделать так, чтобы он всегда отображался справа с transform: translate3d(90px, 0px, 0px) !important;, но значение 90 должно было бы меняться в зависимости от размера

Как я могу это сделать?

Вопрос 2

Если пользователь нажимает на отдел 4, меню создает переполнение x ,

Как отобразить меню без переполнения?

Пример кода

Спасибо.

1 Ответ

1 голос
/ 26 февраля 2020

Для первого вопроса вы можете сбросить left, а затем снова использовать right и transform: translate3d(): 

.tree div.dropdown-menu {
    border: none;
    background-color: transparent;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    left: unset !important;
    right: -60px;
    transform: translate3d(0, 0, 0) !important;
}

Не уверен, правильно ли я понял, но для второго вопроса добавьте overflow: unset до .tree ul. 

.tree ul {
  overflow-x: unset !important;
}

Обычно я не указываю использование !Important, но в этом случае необходимо переопределить свойства.

...