Modify the width of the Sidebar list drop-down box child in Element-ui

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

1. 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：200pxthe 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：200pxmin-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.

---

Show results: