Making sidebar menu wider results in problems when toggling the menu because width stays fixed (Keenthemes Metronic)

Question

Making sidebar menu wider results in problems when toggling the menu because width stays fixed (Keenthemes Metronic)

1k Views Asked by Fth At 20 October 2024 at 01:26

Im working on an angular web app. A Keenthemes Metronic sidebar has been added. Some of the menu texts are too long and they overlap other elements. I know that I can fix this by doing:

text-overflow: ellipsis;

But I want to show the menu titles fully. So I want to expand the menu so that the text fits. I tried out various kind of width content styling but it doesn't work. I also tried to set a fixed width on the sidebar and the heading part (collapse button) and this worked. But this introduces a new problem. When the collapse button is clicked, the width stays fixed and hinders the sidebar to collapse.

I have unsuccessfully tried to find Keenthemes Metronic docs. Do anyone know how I can tackle this problem?

The sidebar can be seen here: https://preview.keenthemes.com/metronic-v4/theme/admin_1/layout_sidebar_menu_light.html

I can make the sidebar wider by setting the width to e.g.:

width: 280px;

And this gives enough space for all menu titles, which is exactly what I want.

But when I click on the mini menu toggler button it fails to toggle the menu because the width of the menu stays fixed at 280px.

Original Q&A

There are 3 best solutions below

**Nulji** · Answer 1

Nulji On 24 October 2020 at 22:02

Pretty simple, you need to inline (with white-space: nowrap) and hide the last characters (with overflow: hidden) :

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

**RafDeSim** · Answer 2

RafDeSim On 04 July 2021 at 13:18

found a solution ! Unfortunately i had to globally replace "width:235px" to my desired width (270px) in file "theme\assets\layouts\layout\css\layout.min.css"

**Chiperific** · Answer 3

When you close the sidebar via the toggler button, it adds the class page-sidebar-menu-closed to the ul. Unfortunately, this is too low in the DOM for us to handle the CSS easily.

BUT, it also changes the class of the body:

Open:

<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white" ...

Closed:

<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" ...

So, on your width, you just want to specify that it doesn't applies to the "closed" version of the sidebar:

body:not(.page-sidebar-closed) div.page-sidebar {
  width: 180px;
}

Or, you could go the other way and set the width back when the sidebar is closed:

div.page-sidebar {
  width: 180px;
}

body.page-sidebar-closed div.page-sidebar {
  width: 45px;
}

Making sidebar menu wider results in problems when toggling the menu because width stays fixed (Keenthemes Metronic)

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in METRONIC

Trending Questions

Popular # Hahtags

Popular Questions