Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

Question

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

I am experimenting with rendering a list of <el-card> items using a transition-group. Each card has a front and back side that flip when a button is clicked.

To achieve a smooth flip transition, I need to apply the style:

position: absolute; top: 0; left: 0

to the cards. However, this causes all the cards to be stacked on top of each other.

If I remove this style, the cards are displayed side by side but the flip effect shows the back item under the front item.

You can view an example here.

I would greatly appreciate any assistance in resolving this issue.

Thank you.

Michael

css vue.js element-ui

Answer 1

Answer №1

The reason for this issue is that the front and back elements of the card are positioned absolutely in relation to the <body> element. Since none of the parent elements have position: relative, they will naturally all display at coordinates (0,0) on the page.

To fix this, you should actually use position: relative on the parent element, preferably on each individual card. Give the parent element a class for easier selection:

<div class="card" v-for="card in cards" v-bind:key="card">

Then, set a fixed width and height (which is 180px, as it's defined for the front/back faces of the card already), and add position: relative to it:

.card {
  position: relative;
  width: 180px;
  height: 180px;
}

Check out a proof-of-concept fix here: https://codesandbox.io/s/xjq08j5n1p

Additionally, you may notice that your example still has a flaw where flipping one card flips all the cards. This is because the flip state is stored on the parent app instance, rather than on each individual card. It's recommended to create a child component for each card to store their flipped states individually.

Answer 2

The reason for this issue is that the front and back elements of the card are positioned absolutely in relation to the <body> element. Since none of the parent elements have position: relative, they will naturally all display at coordinates (0,0) on the page.

To fix this, you should actually use position: relative on the parent element, preferably on each individual card. Give the parent element a class for easier selection:

<div class="card" v-for="card in cards" v-bind:key="card">

Then, set a fixed width and height (which is 180px, as it's defined for the front/back faces of the card already), and add position: relative to it:

.card {
  position: relative;
  width: 180px;
  height: 180px;
}

Check out a proof-of-concept fix here: https://codesandbox.io/s/xjq08j5n1p

Additionally, you may notice that your example still has a flaw where flipping one card flips all the cards. This is because the flip state is stored on the parent app instance, rather than on each individual card. It's recommended to create a child component for each card to store their flipped states individually.

Answer 3

Answer №2

Terry's response was right on target. I thought I would provide a comprehensive example to ensure functionality.

Given that you had defined a .flipper class, I utilized it to incorporate the position:relative block:

.flipper {
  position: relative;
  width: 180px;
  height: 180px;
}

Remember that in order for position:relative to be effective, a size must be specified. Otherwise, if there is no element within the .flipper in flow, its size will be zero.

It is also important to establish the appropriate width of the child elements

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}

We utilize 100% as we have already set the width on the parent.

I transformed flipCards into an array of Boolean values and made adjustments to the flipCardSwitch function.

flipCardSwitch: function(index) {
  // necessary because of https://vuejs.org/v2/guide/list.html#Caveats
  this.$set(this.flipCard, index, !this.flipCard[index]);
}

Don't forget to update the on-click.

@click="flipCardSwitch(i)"

Operational code: https://codesandbox.io/s/71512v9qvx

Answer 4

Terry's response was right on target. I thought I would provide a comprehensive example to ensure functionality.

Given that you had defined a .flipper class, I utilized it to incorporate the position:relative block:

.flipper {
  position: relative;
  width: 180px;
  height: 180px;
}

Remember that in order for position:relative to be effective, a size must be specified. Otherwise, if there is no element within the .flipper in flow, its size will be zero.

It is also important to establish the appropriate width of the child elements

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}

We utilize 100% as we have already set the width on the parent.

I transformed flipCards into an array of Boolean values and made adjustments to the flipCardSwitch function.

flipCardSwitch: function(index) {
  // necessary because of https://vuejs.org/v2/guide/list.html#Caveats
  this.$set(this.flipCard, index, !this.flipCard[index]);
}

Don't forget to update the on-click.

@click="flipCardSwitch(i)"

Operational code: https://codesandbox.io/s/71512v9qvx

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

Answer №1

Answer №2

Similar questions

Guide to positioning text so the baseline aligns with a specific point in HTML/CSS

Improved efficiency in CSS for left transition animations

Styling triangles within a CSS triangle

What is causing the align content property to not function as expected in this situation?

What is the process for implementing custom CSS styles in Cognos?

Choose the label by utilizing the CSS selector

Error in Laraval Breeze: Vue component is missing page or props definition

Applying the active state to the link will cause it to inherit the default styles of the

Dynamic JavaScript tool

Trouble displaying data table using Vue JS (v-for)

Tips for creating a textfield with height that responds dynamically in Material UI

how to change the class of a div when clicking on a <p> element

Ways to implement CSS with javascript

Tips for monitoring multiple values in a Vue 3 script setup

Encountering a 404 Error on Vite-Vue Page Hosted on Azure Blob Storage

When an error message is displayed in the textField, the Material UI button shifts downward

Tips for implementing a fallback image in v-img using Vuetify

Can theme changes be carried over between different pages using Material UI?

Issue with TypeScript in Vue3: Unable to access computed property from another computed property

Incorrect font display occurring exclusively on Windows Chrome