先决条件
- 我有一个 searched 用于重复或关闭的问题
- 我有一个 validated 任何HTML以避免常见问题
- 我阅读了 contributing guidelines
描述问题
当在具有 d-grid
类的 div 中使用复选框和/或单选按钮时,点击会导致浏览器窗口向上滚动。
在桌面上的 Chrome 中可以重现,但在 Safari 和 iOS 的 Chrome 中不行。
我认为原因是点击标签时会将焦点聚焦到相关的输入框上,但是所有的输入框都在父 div 的 (0,0) 位置,而不是靠近标签:
.btn-check {
position: absolute;
}
我的当前解决方法是:
.d-grid {
.btn-check {
display: none;
}
}
简化的测试用例
https://codepen.io/iXeron/pen/ExGjvvv
- 更改浏览器高度,使所有按钮都不适合视口
- 滚动到底部并点击接近底部的任意按钮
- 页面将向上滚动
4条答案
按热度按时间lzfw57am1#
刚刚意识到我可能在这里做错了什么。
如果
d-list
不打算与 "假按钮" (输入和标签)一起使用,请随时关闭工单。无论如何,以下方法也可以实现类似于
d-list gap-3
的效果:iyr7buue2#
我们刚刚也遇到了同样的问题。这似乎与页面上的相关
btn-check
<input>
元素被移动到其他元素下方有关,但当点击相关按钮并使<input>
可见时,会导致整个页面滚动。我发现有人在 Carbon 上提交了一个类似的错误报告:carbon-design-system/carbon#9444
显然,这是 Chrome 的预期行为:https://bugs.chromium.org/p/chromium/issues/detail?id=1235323
0yycz8jy3#
我们也遇到了
btn-check
<input>
元素的相同行为。我们找到的解决方案是添加以下CSS规则:这解决了问题,但没有破坏任何东西(至少看起来是这样),如果bootstrap能自动处理就更好了:)
dy2hfwbg4#
@NoahMDMi 谢谢你-这有助于解决我刚遇到的滚动问题!