Element: [Feature Request] modal-append-to-body for dropdown

Created on 21 Mar 2018 · 6Comments · Source: ElemeFE/element

Existing Component

Yes

Component Name

dropdown

Description

Looking a equivalent of modal-append-to-body prop for the dropdown component.

Currently the dropdown list is being appended to the end of the body.
I need a option to append the dropdown list to be parent dropdown.

My setup being

<html>
  <body>
    <my-app>
    </my-app>
  </body>
</html>

Appending dropdown list at the end of the body is dis-regarding my custom css thats being added in the component 'my-app'.

Source

ashwin0003

Most helpful comment

Yes, we're considering exposing this prop to our users, if it is a popular demand.

Can we expect this anytime soon?

smg99 on 4 Sep 2019

👍4 ❤2

All 6 comments

I think adding a popper-class to <el-dropdown-menu> makes more sense in your use case.

Leopoldthecoder on 21 Mar 2018

I'm not sure if I understand.

Looking at popper.js and vue-popper didn't ring any bells.

Are you perhaps suggesting I use element-ui's popover component?
Or maybe you are suggesting you are going to add popper-class similar to the one in element-ui's SubMenu attributes. So that people could use it as a styling class?

All I was looking for is to append the dropdown menu to the parent dropdown, so that the css I have defined for app component 'my-app' gets applied to the dropdown menu items as well.

<html>
  <body>
    <my-app>
     ...
       <el-dropdown>
         <el-dropdown-menu>
           ...
           <el-dropdown-item>Action</el-dropdown-item>
           ...
         </el-dropdown-menu>
         ----Placement1---
       </el-dropdown>
     ...
    </my-app>
    ----Placement2----
  </body>
</html>

The menu items are being appended at Placement2 and the css I have defined for my-app are not being applied. Appending at Placement1 (similar to how modal-append-to-body=false option for dialog works) seems like a valid place to request append. Hence requested modal-append-to-body.

Thats my exact requirement.

ashwin0003 on 21 Mar 2018

https://jsfiddle.net/leopoldthecuber/yrhk6a9a/

Internally we have a mixin called vue-popper, which takes care of popup menus for all components. It has a prop append-to-body.

DropDown Menu also uses this mixin, so you can directly set append-to-body on it. Though you may need to override position of .el-dropdown so the style won't go crazy:

.el-dropdown {
  position: static;
}

Leopoldthecoder on 22 Mar 2018

👍2 🎉1

Thank you. Solved.
And also thank you for the fast replies and resolution.

The prop :append-to-body="false" helped with my issue. Didn't need to set el-dropdown's position to static but did it anyways just incase some other changes in the future mess things up.

I had tried :modal-append-to-body="false" but that didn't help.
Dev tools for vue didn't show append-to-body and modal-append-to-body in its list of props and it was neither in the docs so definitely wouldn't have tried the suggested solution.

ashwin0003 on 22 Mar 2018

Yes, we're considering exposing this prop to our users, if it is a popular demand.

Leopoldthecoder on 22 Mar 2018

👍2