Ends in:
2 DAYS
0 HR
11 MIN
9 SEC
Ends in:
2 D
0 H
11 M
9 S
Open Closed

Longer Menu text display issue #3016


User avatar
0
shobhit created
  • 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)
  • User Avatar
    0
    mahmut.gundogdu created

    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;
    }
    
    

  • User Avatar
    0
    mahmut.gundogdu created

    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);
    }
    
    
  • User Avatar
    0
    mahmut.gundogdu created

    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.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35