Bulma

Question

我意识到嵌入模态卡体中的 Bulma 下拉菜单被模态体覆盖，所以这会导致 UX 问题，如果下拉菜单高于卡体本身，用户必须向下滚动或移动鼠标光标并向下移动滚动条，什么是适当的 CSS 修复？即让下拉菜单出现在顶层（我增加了 ddl 的 z-index 但没有运气，请注意：我 DO 需要 overflow-y: scroll 或 auto为模态卡体部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
  <div id="modal-ter" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
        <button class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body" style="height: 188px">
        <div class="dropdown is-active">
          <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
              <span>Click me</span>
              <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </button>
          </div>
          <div class="dropdown-menu" id="dropdown-menu3" role="menu">
            <div class="dropdown-content">
              <a href="#" class="dropdown-item">
                Overview
              </a>
              <a href="#" class="dropdown-item">
                Modifiers
              </a>
              <a href="#" class="dropdown-item">
                Grid
              </a>
              <a href="#" class="dropdown-item">
                Form
              </a>
              <a href="#" class="dropdown-item">
                Elements
              </a>
              <a href="#" class="dropdown-item">
                Components
              </a>
              <a href="#" class="dropdown-item">
                Layout
              </a>
              <hr class="dropdown-divider">
              <a href="#" class="dropdown-item">
                More
              </a>
            </div>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
    <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>
</html>

此记录有一个未解决的 Bulma 问题：https://github.com/jgthms/bulma/issues/936

我在上面的代码笔示例中添加了评论： https://codepen.io/wayneye/pen/ZEyQzOx

Answer 1

从这个 CSS class 中删除 overflow: auto; 它将正确显示：


.modal-card-body {
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  flex-grow: 1;
  flex-shrink: 1;
  /* overflow: auto; */
  padding: 20px;
}

这可能会对您的其他模态框产生意想不到的副作用，但不幸的是，目前没有原生 CSS 方法来检查 child 元素是否存在 parent 然后设置 parent.

的样式

您可以使用 JavaScript 通过使用额外的 CSS class 或内联样式标签覆盖 parent class 来做到这一点，如果下拉列表是存在（或仅在显示时添加它，连同 display: 块）。

Answer 2

不建议使用，但可以使用

position: fixed !important;

确保中和 top 和 left 样式的 bulma 下拉菜单：

left: unset !important;
top: unset !important;

.dropdown-menu {
  position: fixed !important;
  z-index: 20;
  left: unset !important;
  top: unset !important;
  margin-top: 40px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
  <div id="modal-ter" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
        <button class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body" style="height: 188px">
        <div class="dropdown is-active">
          <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
              <span>Click me</span>
              <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </button>
          </div>
          <div class="dropdown-menu" id="dropdown-menu3" role="menu">
            <div class="dropdown-content">
              <a href="#" class="dropdown-item">
                Overview
              </a>
              <a href="#" class="dropdown-item">
                Modifiers
              </a>
              <a href="#" class="dropdown-item">
                Grid
              </a>
              <a href="#" class="dropdown-item">
                Form
              </a>
              <a href="#" class="dropdown-item">
                Elements
              </a>
              <a href="#" class="dropdown-item">
                Components
              </a>
              <a href="#" class="dropdown-item">
                Layout
              </a>
              <hr class="dropdown-divider">
              <a href="#" class="dropdown-item">
                More
              </a>
            </div>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
    <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>

</html>

注意：为了更好的效果，建议给bulma dropdown的父元素固定位置

Answer 3

问题在于当下拉菜单打开并且用户开始滚动时您期望的行为。下拉菜单应该改变位置吗？当带有“点击我”的下拉按钮不再可见时会发生什么，因为用户将其滚动到看不见的地方。如果下拉菜单也应该改变位置，那么你会遇到奇怪的情况。所以我做了这个例子来说明如何通过在用户滚动时隐藏下拉菜单来解决这个问题。

function contentScroll() {
  document.querySelector(".dropdown-menu").style.display = "none";
}

function clickMe(button) {
  const rectObject = button.getBoundingClientRect();
  const marginBelowButton = 2;
  const dropdownContent = document.querySelector(".dropdown-menu");
  dropdownContent.style.display = "block";
  dropdownContent.style.top = rectObject.top + marginBelowButton + rectObject.height + "px";
  dropdownContent.style.left = rectObject.left + "px";
}

.dropdown-menu {
  position: fixed !important;
  z-index: 20;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div id="modal-ter" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
        <button class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body" style="height: 188px" onscroll='contentScroll()'>
        <div class="dropdown is-active">
          <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3" onclick="clickMe(this)">
              <span>Click me</span>
              <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </button>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
          <div class="dropdown-menu" id="dropdown-menu3" role="menu">
            <div class="dropdown-content">
              <a href="#" class="dropdown-item">
                Overview
              </a>
              <a href="#" class="dropdown-item">
                Modifiers
              </a>
              <a href="#" class="dropdown-item">
                Grid
              </a>
              <a href="#" class="dropdown-item">
                Form
              </a>
              <a href="#" class="dropdown-item">
                Elements
              </a>
              <a href="#" class="dropdown-item">
                Components
              </a>
              <a href="#" class="dropdown-item">
                Layout
              </a>
              <hr class="dropdown-divider">
              <a href="#" class="dropdown-item">
                More
              </a>
            </div>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
  <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>

</html>

如果您不想在滚动时隐藏下拉菜单，您还可以通过将函数 contentScroll() 更改为此来更新位置，使其跟随按钮：

function contentScroll() {
  clickMe(document.querySelector(".button"));
}

但是就像我说的那样会出现奇怪的情况

Bulma - 下拉列表位于模态卡体后面

Bulma - Dropdown gets behind modal card body

css

web-frontend