如何解决将侧边栏菜单变宽会导致切换菜单时出现问题,因为宽度保持固定Keenthemes Metronic
我正在开发一个有角度的Web应用程序。添加了Keenthemes Metronic侧边栏。一些菜单文本太长,与其他元素重叠。我知道我可以通过以下方法解决此问题:
text-overflow: ellipsis;
但是我想完整显示菜单标题。因此,我想扩展菜单以使文本适合。我尝试了各种宽度内容样式,但没有用。我还尝试在侧边栏和标题部分(折叠按钮)上设置一个固定的宽度,并且可以正常工作。但这引入了新的问题。单击折叠按钮时,宽度保持固定并阻止边栏折叠。
我未能成功找到Keenthemes Metronic文档。有谁知道我该如何解决这个问题?
可以在此处看到侧边栏:https://preview.keenthemes.com/metronic-v4/theme/admin_1/layout_sidebar_menu_light.html
我可以通过将宽度设置为例如来使边栏变宽:
width: 280px;
这为所有菜单标题提供了足够的空间,这正是我想要的。
但是,当我单击迷你菜单切换器按钮时,它无法切换菜单,因为菜单的宽度固定为280px。
解决方法
非常简单,您需要内联(使用空格:nowrap)并隐藏最后一个字符(使用溢出:隐藏):
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
,
通过切换器按钮关闭侧边栏时,会将类page-sidebar-menu-closed
添加到ul
中。不幸的是,在DOM中这太低了,我们无法轻松处理CSS。
但是,它也会更改body
的类:
打开:
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white" ...
关闭:
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" ...
因此,在您的宽度上,您只想指定它不适用于侧栏的“封闭”版本:
body:not(.page-sidebar-closed) div.page-sidebar {
width: 180px;
}
或者,您也可以采用另一种方法,并在关闭侧边栏时将宽度设置回原来的位置:
div.page-sidebar {
width: 180px;
}
body.page-sidebar-closed div.page-sidebar {
width: 45px;
}
,
找到了解决方案!不幸的是,我不得不在文件“theme\assets\layouts\layout\css\layout.min.css”中将“width:235px”全局替换为我想要的宽度(270px)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。