Vue Component: Dropdown menu open inside div-CodePudding

I’m building a dropdown component for my project. But when i add the component is a responsive table the menu is open within the div.

Here is my code:

How can i make the dropdown-menu to append to the body and set a transform(x,y)

CodePudding user response：

Split dropdown menu into other component, in mounted hook use document.body.appendChild drowdown menu elemement (this.$el). I have already updated in this sandbox.

Hope this help!

CodePudding user response：

Try with position: fixed !important;:

new Vue({
  el: "#demo",
  data() {
    return {
      showMenu: false,
    };
  },
})

.dropdown-menu {
  position: fixed !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="demo">
  <div >
    <table >
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Joe Band</td>
          <td>
            <div >
              <button  @click="showMenu = !showMenu">
                Action
              </button>
              <ul  :>
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a>Item 3</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>