Как я могу расположить свой раскрывающийся список CSS, чтобы он не исчезал с экрана? - PullRequest
Новая
       18

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

0 голосов
/ 02 мая 2019

Я работаю над раскрывающимся списком, и некоторые раскрывающиеся меню содержимого выходят за край экрана. У меня нет хорошего решения, чтобы гарантировать, что выпадающие списки остаются в видимой области экрана, за исключением того, чтобы быть немного тяжелыми руками и добавлять идентификаторы к определенным выпадающим спискам и размещать их, как я считаю нужным.

Я добавил фрагмент ниже, который демонстрирует проблему. Я также создал кодекс с помощью scss. codepen.io

Я ожидаю, что все выпадающие списки появятся в границах экрана. 

body {
  box-sizing: border-box;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: row;
  outline: 5px solid orangered;
}

.container__item {
  position: relative;
  height: 20px;
  width: 100%;
  background-color: blue;
  border: 5px solid black;
}

.container__itemdropdown {
  position: absolute;
  top: 100%;
  height: 100px;
  width: 500px;
  background-image: linear-gradient(90deg, red, yellow, yellow, red);
  margin: 10px;
  border: 5px solid black;
  opacity: 0;
}

.container__item:hover .container__itemdropdown {
  opacity: 1;
}
<div class="container">
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
  <div class="container__item">
    <div class="container__itemdropdown"></div>
  </div>
</div>

1 Ответ

0 голосов
/ 02 мая 2019

Не очень уверен с scss, но есть несколько трюков css, которые вы можете попробовать, например:

контейнер: last-child { плавать: правильно }

или

контейнер {позиция: абсолютная}; контейнер {слева: - (someNumber) px};

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

...