RUOYI如何修改左边菜单栏显示不全问题

最新推荐文章于 2024-07-29 09:35:57 发布
最新推荐文章于 2024-07-29 09:35:57 发布
阅读量892 收藏 3
点赞数
文章标签： vue.js elementui 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012832267/article/details/133770525
版权
文章描述了在使用若依架构时遇到的右侧菜单显示问题，通过检查前端代码发现是由于logo高度占满导致下方空间压缩。解决方案是增加`padding-bottom`，具体在`src/assets/styles/sidebar.scss`中实现，解决了滚动条无法显示的问题。
摘要由CSDN通过智能技术生成

一、遇到问题

使用若依架构后发现右边菜单有两项无法显示，即使有滚动条也不行，只能通过调整浏览器比例进行解决，但总不是长久之计

二、解决思路

在网上查了一遍只有解决每项字数不全，增加宽度的，于是自习研究了一下，看了一下前端代码，发现高度都是100%，于是猜想可能是上面的logo太大导致下面的空间受到压缩，于是增加了padding-bottom：120px.问题解决

文件路径：\src\assets\styles\sidebar.scss

ty10000000000000
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
若依如何调整首页左侧菜单栏宽度？
猿小白的博客
12-22 3316
调整style.css对应样式宽度，例如宽度200修改成250 body.fixed-sidebar .navbar-static-side, body.canvas-menu .navbar-static-side { width: 250px; } nav .logo { width: 250px; } #page-wrapper { margin: 0 0 0 250px; }
若依菜单名称过长显示不全怎么办？
猿小白的博客
03-30 482
菜单名称太长的话超出宽度部分会显示...，此时我们可以自己调整一下菜单的宽度或者设置一个title，这样鼠标移动上去显示完整的菜单名称。
管理台左侧菜单栏显示不全
qq_38517231的博客
11-24 1334
左侧菜单栏文字过多导致显示不全，鼠标悬浮文字向左移
ruoyi添加新页面(侧边栏不显示，只在顶部导航显示)
最新发布
qq_44161722的博客
07-29 428
进入后台系统，找到菜单管理，创建对应的页面。在views中创建对应的页面。
vue element框架中侧边导航栏显示不全问题
qq_46872379的博客
09-08 3361
今天在写项目的时候遇到这个问题，侧边导航栏在浏览器正常大小下显示不全（帮助中心为导航栏的父级菜单），检查路由配置和权限分配，都没有错，如下图 导航栏左边的滚动条拉到底还是不显示，但是把界面缩小就能显示，如下图： 查看样式找到相应组件才看到高度被隐藏了 赶紧找到公共样式里的相应id的样式修改为 这样，在正常大小的浏览器界面也能显示完全 ...
vue当左侧导航栏高度溢出无法下拉显示全
a576837179的博客
01-19 1024
外层设置overflow:hidden，内层设置overflow-y:scroll，内层比外层多20px来隐藏滚动条; <template> <el-container> <div class="asideBox"> <el-aside> <leftMenu></leftMenu> </el-aside> </div> <el-main></el-main&gt
ruoyi框架修改左侧菜单样式
renkai721的专栏
09-22 5068
vue修改菜单样式，element修改菜单样式,ruoyi框架修改菜单样式
若依框架——解决菜单显示不全的问题
weixin_44506660的博客
03-09 2912
若依框架——解决菜单显示不全的问题
ruoyi生成代码后后台不显示子菜单
2301_77217944的博客
04-15 948
1.将生成代码的admin文件夹粘贴指项目 2.在数据库ruoyi-vue-pro中运行sql.sql 3.debug运行YudaoServerApplication 4.重新编译后台项目npm run dev即可 原因：ruoyi的后台页面的子菜单是从数据库里读取出来的
若依左边菜单栏调到上方显示
weixin_54446335的博客
03-25 1190
我们一共需要改动这几个文件。
ruoyi菜单折叠，菜单收缩
renkai721的专栏
09-22 1663
vue菜单收缩,vue菜单折叠,element菜单折叠,element菜单收缩，点击按钮收缩菜单
菜单栏隐藏
10-05
“菜单栏隐藏”技术的核心是让用户能够快速、便捷地管理屏幕上显示的应用窗口。"QuickHider"作为这类工具的代表，它允许用户自定义要隐藏的窗口，并设置快捷键（如Alt+X）来实现一键隐藏和恢复。这不仅可以减少视觉...
swagger接口文档改良添加左侧菜单.rar
07-28
Swagger接口文档改良添加左侧菜单是针对API开发过程中的一个重要优化，旨在提高开发人员对API文档的使用效率。Swagger是一款流行的RESTful API文档工具，它能够自动生成、描述、测试和发现Web服务接口。通过在...
avue框架将左侧菜单栏换为顶置菜单栏
weixin_44770377的博客
04-30 3166
avue默认的左侧边栏如下： 修改为顶置菜单栏效果如下： 如何实现的？ 一、先注释左侧边栏的部分 二、新建一个子组件topMenuList <template> <div> <div style="display: flex;height: 60px;align-items: center;background-color:transparent;...
vue3之拆若依--记实现后台管理首页(左侧菜单栏、头部信息区域...)
小白小白从不日别的博客
06-05 423
在根目录下新建 vite 目录，在vite目录下新建plugins子目录，在plugins目录下新建以下四个文件。这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。: 虽然 Tailwind 提供了许多实用的 CSS 类，但为了确保这些类在所有浏览器中都能正确渲染，`：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。在项目根目录下新建 tailwind.config.js 文件。
高亮效果显示效果
weixin_57772585的博客
11-17 367
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： DW 作者：若依 撰写时间：2021/11/18 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 建立文件夹修改标题后，div设置类名用a标签写入文字。 2.通配符设置内边距20px，外边距0px, 3
若依(ruoyi)框架vue3将左侧菜单默认展开
前端程序猿的博客
09-20 5564
步骤二、找到src--->layout--->components--->Sidebar--->SidebarItem.vue 将此文件替换成下文。步骤一、找到src--->layout--->components--->Sidebar--->index.vue 将此文件替换成下文。
随手记：若依系统左侧菜单鼠标移入显示完整文案 vue2
weixin_63515766的博客
09-28 503
若依系统左侧菜单鼠标移入显示完整文案 vue2
若依管理系统不小心将左侧栏中的系统管理菜单隐藏，怎么恢复显示
futureexpectaion的博客
03-29 5310
找到系统管理下面的菜单管理文件夹ruoyi-ui/views/system/menu/index.vue。找到之后将文件夹中所有内容复制粘贴到ruoyi-ui/layout/index.vue保存之后显示页面。如果还是显示不了 看看你修改的位置菜单状态 选择的是第几个 选择第一个就可以了 不能选第二个。因为点击了隐藏 所以系统管理菜单被隐藏掉了之后就不回再显示出来。点击显示按钮之后再把原来复制的文件夹恢复原来的内容刷新就好了。恢复被隐藏掉的系统管理菜单。
ruoyi菜单栏颜色怎么修改
05-21
要修改Ruoyi菜单栏的颜色，你需要进行以下步骤： 1. 打开 `ruoyi-admin` 项目，找到 `src/main/resources/static/css/frame.css` 文件。 2. 找到 `.navbar-default` 类，这个类定义了菜单栏的样式。 3. 修改 `.navbar-default` 类中的 `background-color` 属性的值为你想要的颜色值。 4. 保存修改，重新启动 `ruoyi-admin` 项目，查看菜单栏的颜色是否已经修改成功。 例如，如果你想将菜单栏的颜色修改为红色，可以在 `.navbar-default` 类中添加以下代码： ```css .navbar-default { background-color: #FF0000; } ``` 注意，这个修改只会影响到 `ruoyi-admin` 项目的菜单栏，如果你想修改其他项目的菜单栏，需要根据项目的具体情况进行修改。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值