[Vuejs]-Position: absolute only working on the first item

by

0👍

Absolutely positioned elements are positioned absolutely relative to their most recent parent that has position: relative on it (or position: absolute as well).

You need to put both elements inside a container that has position: relative so that the dropdown will be positioned relative to the card, not to the whole container.

0👍

The menu is currently positioned relative to custom-users, which is common to all <user-card>. It simply looks like it’s associated with the first <user-card> because they both are aligned to the top left (in normal flow).

Move the menu

<div class="menu" v-if="showMenu">
   <p>Delete</p>
</div>

Inside the <user-card> component, apply position: relative; to it’s top most element and make the below state and method part of <user-card> as well.

data() {
  return {
       showMenu: false,
    };
  },
methods: {
   openMenu(){
      this.showMenu = !this.showMenu;
   },
}

This won’t be a big problem for now since menu is only created conditionally. If menu turns out to be a large component on it’s own, you can give it the ability to be displayed at coordinates passed in as props in future.

Leave a comment