用混合菜单布局，浏览器左边出现一个空白

[wangfeiyu2020]

🧐 问题描述 | Problem description

用混合菜单布局，浏览器左边出现一个空白，侧边菜单布局是好的，换了浏览器也不行，而且别人跑项目是好的，是什么原因

💻 示例代码 | Sample code

🚑 其他信息 | Other information

OS:

Node：

浏览器 | browser：firefox

[chang2023]

依赖的代码库更新了，我看 ant design 和 pro component 都最近更新了。先锁死版本吧

[wangfeiyu2020]

版本是：v5的
"name": "ant-design-pro",
"version": "6.0.0",
"@ant-design/pro-components": "^2.3.57",
"@ant-design/pro-cli": "^2.1.5",

[WuJiY]

更新到最新的会有这问题

[hyzx86]

我这边也是。。不知道哪个依赖库出了问题~ 回滚都滚不过去

Layout 配置如下 , 然后菜单左边多一块。而且 菜单旁边的线条还不能充满到底部

{
    "title": "SalesPortal",
    "logo": "/media/siteassets/logo.svg",
    "loginBg": "/media/siteassets/loginbg.png",
    "amis": {
        "theme": "antd"
    },
    "navTheme": "light",
    "layout": "mix",
    "contentWidth": "Fluid",
    "fixedHeader": false,
    "fixSiderbar": true,
    "pwa": true,
    "token": {
        "header": {
            "colorBgHeader": "#0078d4",
            "colorHeaderTitle": "#fff",
            "colorTextMenu": "#dfdfdf",
            "colorTextMenuSecondary": "#dfdfdf",
            "colorTextMenuSelected": "#fff",
            "colorBgMenuItemSelected": "#22272b",
            "colorTextRightActionsItem": "#dfdfdf",
            "heightLayoutHeader":48
        }
    }
}

[hyzx86]

安装包之前 删除了 pnpm-lock.yaml
rimraf .\node_modules;rimraf .\pnpm-lock.yaml;pnpm i; pnpm run start

[hyzx86]

基于官方项目删除 lock 文件后也是这样

[wangfeiyu2020]

大神门，谁有解决方案啊？

[hyzx86]

更新 package.json
把版本限定在：下面这样，不要前面的倒三角 然后 pnpm i
"@ant-design/pro-components": "2.3.57",

[satanrabbit]

定义一个样式吧：

body {
  .my-prefix-layout .my-prefix-sider-fixed {
      position: fixed !important;
  }
}

[hyzx86]

先回滚了，样式 虽然可以隐藏，但是菜单右边一条线不到底

[wangfeiyu2020]

ok，谢谢

[hyzx86]

我这边 是 256 ~~ 估计这段代码是计算的，然后代码的某个地方 结束标签位置不对

<div style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"></div>

[zhyblack]

在官网拉的最新版我也是这样的，设置固定侧边菜单=false，可以解决，然后npm install 其他包得时候，拉不成功，一生气直接执行 yarn upgrade --latest 然后就修复了，就算侧边菜单=true也是正常得，

  "dependencies": {
    "@ant-design/charts": "^1.4.2",
    "@ant-design/icons": "^5.0.1",
    "@ant-design/pro-components": "^2.4.6",
    "@ant-design/use-emotion-css": "1.0.4",
    "@umijs/route-utils": "^4.0.1",
    "ali-oss": "^6.17.1",
    "antd": "^5.4.6",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "omit.js": "^2.0.2",
    "rc-menu": "^9.8.2",
    "rc-util": "^5.27.2",
    "react": "^18.2.0",
    "react-dev-inspector": "^1.8.4",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0"
  },

[hyzx86]

@ant-design/pro-components 2.4.12 已经好了

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

问题描述中提到了侧边菜单布局是正确的，并且在其他浏览器中也是正常的，这说明问题可能与浏览器有关。由于提供的信息有限，我将给出以下解决方案来解决这个问题：

步骤一：检查浏览器兼容性

首先，检查浏览器的兼容性，确保使用的浏览器支持所使用的前端技术（如CSS Grid）。可以使用Can I Use网站来检查浏览器的兼容性。

步骤二：清除浏览器缓存

有时候浏览器可能会缓存旧的版本的前端文件，导致页面显示异常。尝试清除浏览器缓存，然后重新加载页面，看看是否能够解决问题。

步骤三：检查侧边菜单布局的代码

仔细检查侧边菜单布局的相关代码，确保没有错误或者冲突的CSS样式。可以使用浏览器的开发者工具来检查元素的样式并进行调试。确保侧边菜单布局的CSS样式是正确的。

步骤四：检查项目依赖和配置

检查项目依赖和配置，确保项目中使用的库和框架（如React、Umi和Antd）的版本是正确的，并且配置文件中没有错误的配置项。特别注意Umi和Antd的配置项，可能会影响页面布局。

步骤五：检查项目环境设置

检查项目的环境设置，包括Webpack或者其他打包工具的配置。确保打包后的前端文件没有错误或者冲突的代码。可以尝试重新构建项目，然后重新加载页面。

步骤六：查看控制台输出

查看浏览器的控制台输出，看看是否有任何错误或者警告信息。根据错误或者警告信息，进行相应的调试和修复。

如果以上解决方案都没有解决问题，可以尝试在其他浏览器中运行项目，或者将项目部署到其他环境中。如果问题仍然存在，可能需要更多的信息来进行进一步的分析和解决。