- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我意识到嵌入模态卡体中的 Bulma 下拉菜单会被模态体覆盖,因此这会导致 UX 问题,如果下拉菜单高于卡体本身,用户必须向下滚动或移动鼠标光标向下移动滚动条,对此合适的 CSS 修复是什么?即让下拉菜单出现在顶层(我增加了 ddl 的 z-index
但运气不好,请注意:我确实需要 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>
此记录有一个 Unresolved Bulma 问题:https://github.com/jgthms/bulma/issues/936
我在上面的代码笔示例中添加了评论: https://codepen.io/wayneye/pen/ZEyQzOx
最佳答案
问题在于当下拉菜单打开并且用户开始滚动时您期望的行为。下拉菜单应该改变位置吗?当带有“点击我”的下拉按钮不再可见时会发生什么,因为用户将其滚动到看不见的地方。如果下拉菜单也应该改变位置,那么你会遇到奇怪的情况。所以我做了这个例子,说明如何通过在用户滚动时隐藏下拉菜单来解决这个问题。
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"));
}
但是就像我说的那样,这会出现奇怪的情况
关于css - Bulma - 下拉列表位于模态卡体后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68932679/
我的 FAB 将显示在 android studio 的设计窗口中,但在我实际运行应用程序时不会显示。 此外,我有一个 ListView 项目,我指定它应该位于工具栏下方,但当我运行该应用程序时,它部
我的Nginx服务器位于haproxy之后,后者位于Varnish之后: 请求网页=> Varnish => HaProxy => Nginx 我的问题是我无法检索客户端的IP地址,在Nginx日志中
我正在尝试在用户点击的图像上显示一些上下文信息。 我正在为此使用 vtkTextActor。我正在使用 python 绑定(bind)。 问题是因为它在图像上很难阅读,所以我想在它后面画一些背景。 (
我创建了一个 flutter 小部件,它由几个组成应用栏和选项卡的条子组成,在其下方,我有 TabBarView。 1) 选项卡和主体 ScrollView 之间有过多的填充,但我不确定是什么元素导致
当我在 Xcode 4.3.3 上运行我的 cocoa 应用程序时。使用 Lion 10.7.4。应用程序启动并出现在 Xcode 后面。前面几次出现,不知道发生了什么。有人遇到过这样的问题吗?我的主
我需要将一些文本相对于“dropzone”(div)水平和垂直居中放置。它适用于以下解决方案:Inject a text above a div centered horizontally and v
我正在尝试在列表上使用匹配的几何效果,并且至少对于详细 View 的动画来说,它的工作方式与预期的一样。问题是从详细 View 返回列表单元格的动画似乎在列表后面。 我怎样才能让它正常工作,以便详细
我正在尝试在列表上使用匹配的几何效果,并且至少对于详细 View 的动画来说,它的工作方式与预期的一样。问题是从详细 View 返回列表单元格的动画似乎在列表后面。 我怎样才能让它正常工作,以便详细
我对此有点挣扎。在对 Google 进行研究后,我创建了以下计时器例程,该例程在调用时效果良好 // play move method public static void playMove() {
我正在编写一款Android游戏,用户可以购买在购买后动态创建的建筑物。创建它们后,用户可以将它们拖放到任何想要的地方,只要它们在地面上即可。我将天空和地面作为两种不同的框架布局,但天空占据顶部的 2
我有一个包装 div,在那个 div 里面有一些带有下拉按钮的按钮,包装应该有一个最大高度和一个自动滚动。 问题是如果我点击一个按钮,现在下拉菜单总是放在包装器后面,有没有办法让下拉菜单放在包装器的顶
我在 Bootstrap 3 中有一个网站 http://213.239.217.181/carboot/ 我可能会被否决,因为人们会说你试过什么或向我们展示你试过的代码 但我已经为这个问题苦苦挣扎了
我似乎无法解决这个问题,我将标签栏高度从 viewWillLayoutSubviews() 调整为 60,但覆盖 View 似乎不承认调整后的高度并效仿. 我发现的其他类似问题实际上并不相似(请参见此
我在相对布局中有两个线性布局。每个线性布局中有三张图片。从而形成一个图片网格,其中三张图片水平放置在第一个线性布局中,三张在上面的第二个中。如下所示 我的网格 xml 代码是:
我一直试图在我的页面上获取多个背景图片,但我无法获取超过 2 个,所以我开始考虑我可以使用 div 代替。但是当我使用 div 时,我在屏幕的顶部和两侧留下了大约 5 个白色像素,直到我将位置更改为绝
我有一些关于 CSS 的问题。您可以查看以下链接: http://lookdemo.biz/webs/chirag/mickes_figurer/ 在那里,您会在文本“NYFÖDDA FIGURER”
我有一个问题,我有一个绝对定位的 div,它充当背景图像顶部的颜色叠加层。 我遇到的问题是这个绝对定位的 div 之后的所有内容都放在它后面而不是在它上面。我不太明白发生了什么事。我知道它必须简单。
我知道这是一个热门话题,但我浏览了很多论坛,但没有一个修复对我有用。我有一个下拉菜单,隐藏在我正在显示的 pdf 后面。我尝试将 pdf 设置为嵌入并将其设置为 iframe。我尝试更改 css 中的
我不确定我是否在这里遗漏了什么,但似乎我无法将图像映射放在其他所有内容之上(就 z-index 而言)。我尝试改变 HTML 元素定义的顺序,我尝试使用 CSS 来定义适当的 z-index 值,但这
我有一个使用来自 slideful.com 的 iframe 的幻灯片。 slideful 的幻灯片使用 jquery。将幻灯片放在主页上后,我在导航中添加了一个下拉菜单,它位于“slideful.c
我是一名优秀的程序员,十分优秀!