Problem Description
When the vue project introduces the sidebar of element-ui, when the size of the sidebar sidebar is adjusted to 180px, the width of the drop-down list subitem will exceed (the default is 200px).
renew
- It is easier to modify by adding method 2
as the picture shows:
Cause Analysis:
The width of the child item in the default style of the list is not correctly modified to be the same as that of the parent,
that is, the < li > under the < ul > cannot maintain the same width as the < ul >.
Solution 1:
1. Browser F12 to open the element selection, click the corresponding element option:
2. Find the style area, and look at min-width:200px
the configuration item:
3. Find the path according to the prompt: node_modules/element-ui/lib/theme-chalk/index.css
4. Open the css file to find the corresponding configuration item: modify it
tomin-width:200px
min-width: 100%;
Solution 2:
- Add to the corresponding SideBar style:
Solution 2:
- Add to the corresponding SideBar style:
/deep/ .el-submenu .el-menu-item{ min-width:100%}
- The effect is the same, and it will not be affected after reinstalling dependencies.