将侧边栏菜单变宽会导致切换菜单时出现问题，因为宽度保持固定Keenthemes Metronic

编程问答 2022-06-06

问题描述

我正在开发一个有角度的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）

htmltwitter-bootstrap