materializecss, содержимое выпадающего меню с вертикальным смещением - PullRequest
Новая
       18

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

0 голосов
/ 17 мая 2018

Я пытаюсь добавить раскрывающееся меню к моей навигации, как описано в документации здесь .

По умолчанию .dropdown-content установлено на top: 0;. А вот поведение по умолчанию:

enter image description here

Если я изменил верхнюю часть на 50px в materialize.css, он фактически переместит ее вверх 50 пикселей и установит стиль элемента на top: -50px.

Вот код: 

.dropdown-content {
    top: 50px;
}

Но когда он рендерится, элемент выглядит так: 

<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -50px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

(ключ `top: -50px;)

Я тестировал с несколькими значениями, вот 65: 

.dropdown-content {
    top: 65px;
}
<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -65px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

(сейчас top: -65px)

Вот скриншот, если вы хотите посмотреть

Почему это инвертирует это значение? Как сделать раскрывающийся список, чтобы он не закрывал главное меню?

Ответы [ 4 ]

0 голосов
/ 26 декабря 2018

Похоже, эта опция была добавлена ​​в Materialise v1.0.0: https://materializecss.com/dropdown.html через опцию coverTrigger при создании экземпляра.По умолчанию установлено значение true (для достижения желаемого поведения необходимо установить значение false).

0 голосов
/ 17 мая 2018 
  <mat-menu class="abc" #menu="matMenu" [overlapTrigger]="false">
          <div mat-menu-item  >
           11111
          </div>

               <div mat-menu-item  >
           22222222
          </div>

       </mat-menu>

Надеюсь, что это работает

0 голосов
/ 17 мая 2018

Я проверил это, и я вижу лучший способ сделать это, потому что стили исходят из JS, который имеет специальный calc, который я проверил, и если вы хотите избежать какой-либо фиксированной высоты, возможно, у вас будет заполнение или что-то в заголовке, так что лучше всего дать top:100% и использовать !important, чтобы быть сильнее, чем JS

дать класс .dropdown-content top: 100% !important; 

.dropdown-content {
  top: 100% !important;
}
0 голосов
/ 17 мая 2018

Не решение, но в качестве обходного пути я добавил элемент "spacer" в верхней части раскрывающегося списка: 

<li class="spacer"></li>

.dropdown-content {
    background: none;  //overwrites default materialzie value of white
}

.dropdown-content li > a, .dropdown-content li > span {
    background-color: white;  //needed now that the whole menu has no background
}
.dropdown-content li:hover, .dropdown-content li.active {
    background: none; //no white on hover
}

.dropdown-content li.spacer {
    min-height: 65px;  //height of the nav element
    cursor: default;  //so it doesn't look like a menu option
    opacity: 0;  //the magic
}

И вот результат:

enter image description here

...