Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] 保存并应用 按钮 下拉栏显示不全 #513

Closed
muink opened this issue Aug 1, 2024 · 2 comments · May be fixed by #516
Closed

[BUG] 保存并应用 按钮 下拉栏显示不全 #513

muink opened this issue Aug 1, 2024 · 2 comments · May be fixed by #516

Comments

@muink
Copy link
Contributor

muink commented Aug 1, 2024

保存并应用 按钮 下拉栏显示不全
已在最新版 Firefox 和 Chromium 下测试得到一样的结果
image

@sbwml
Copy link

sbwml commented Aug 10, 2024

👍给你的发现问题点赞!

上图能直接看出 ul dropdown 这个弹出按钮被其它元素限制了,分享下我自己的解决方案:

给 cbi-page-actions(保存并应用 & 保存 && 重置) 类添加一个 绝对定位 属性,让他能在父元素内任何位置进行定位,不被其它元素遮挡。

 .cbi-page-actions {
   padding: 1rem;
-  text-align: right;
+  position: absolute;
+  right: 0;
   justify-content: flex-end;
 }

但是值得注意的是,窗口的高度变化可能会使它遮挡页脚内容,所以可以给 footer 增加一个外边距,大约 3.5 倍字体大小的长度来避免这种情况的出现。

 footer {
   font-size: .875rem;
   overflow: hidden;
   padding: 1rem;
   text-align: right;
   white-space: nowrap;
   color: #aaa;
+  margin-top: 3.5rem;
 }

如果你是强迫症患者还可以调整一下 cbi-dropdown 的左右外边距,使它居中。
QQ_1723286337837

最终的效果:

PC 端

100%
QQ_1723286448351

125%
QQ_1723286459560

175%
QQ_1723286502466

移动端

QQ_1723286530844

@muink
Copy link
Contributor Author

muink commented Aug 14, 2024

感谢您的解答
我根据您的回答修改了 cascade.less 和 cascade.css
多出来的部分是因为文字超长了
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants