Closed

Longer Menu text display issue #3016

shobhit created 3 years ago

ABP Framework version: v4.2.2
UI type: Angular
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): yes
Exception message and stack trace:
Steps to reproduce the issue:"

We are not able to display longer menu text or if we have multi-level menu structure. What is the best way to show the full menu text. please find below 1 such example:

3 Answer(s)

mahmut.gundogdu created 3 years ago

There is a multiple solution. 1- You can wrap the text next line.

|Add CSS in your styles.css in angular.

.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li > a > span.lp-text,
.lp-closed.lp-extended .lp-sidebar .lp-sidebar-navi ul li a span.lp-text {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

 # Optional 
 .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li > a > span.lp-text,
 .lp-closed.lp-extended .lp-sidebar .lp-sidebar-navi ul li > a > span.lp-text {
  line-height: 18px;
}

mahmut.gundogdu created 3 years ago

Solution 2:

change/override the sidebar width. add these code to styles.scss/css

:root {
  --lpx-width: 400px;
  --lpx-grid: 24px;
}
.lp-opened-sidebar .lp-sidebar {
  width: var(--lpx-width);
}

body.lp-opened-sidebar .lp-content {
  padding-left: calc(var(--lpx-width) + var(--lpx-grid));
}

.lp-closed.lp-extended .lp-sidebar {
  width: var(--lpx-width);
}

0

mahmut.gundogdu created 3 years ago

Solution 3:

Wait and update new lepton X (Lepton X is beta now. It will release soon). It uses CSS variables, and users can easily override the values.