The menu bar on the left side of the management console is not fully displayed

RuoYi Framework: Frequently Asked Questions | RuoYi 

Problem: Too much text in the menu leads to incomplete display

 

 Solution: Let the text display completely first, and move the text to the left when the mouse hovers on the menu

 Style path: mxfpay-ui\src\assets\styles\sidebar.scss

/*注释掉文字超出显示...*/
.el-menu-item, .el-submenu__title {
  // overflow: hidden !important;
  // text-overflow: ellipsis !important;
  // white-space: nowrap !important;
}

/*鼠标悬浮菜单向左移:margin-left: -20px;*/
& .el-submenu .el-menu-item {
    min-width: $base-sidebar-width !important;
    &:hover {
      background-color: rgba(0, 0, 0, 0.06) !important;
      margin-left: -20px;
   }
}

Renderings: 

  

 

 

 

 

Guess you like

Origin blog.csdn.net/qq_38517231/article/details/128014900