When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Question

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3!

I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj

In essence, I have a ul element with relative positioning, followed by a series of div elements with absolute positioning where I dynamically calculate the top property.

My goal is to display text after the entire list, but when I attempt this, the ul element ends up with a height of 0px. How can I maintain height while achieving the desired outcome?

Below is a simple HTML5 & CSS3 example:

ul {
  position: relative;
  border: solid 1px coral;
}

li {
  position: absolute;
  top: calc(10px * var(--index));
  border: solid 0.5px black;
}

<ul>
<li style="--index:0">list item</li>
<li style="--index:1">list item</li>
<li style="--index:2">list item</li>
<li style="--index:3">list item</li>
<li style="--index:4">list item</li>

</ul>

<p>test that should appear after the list</p>

javascript css vue.js vuejs2 vue-component

Answer 1

Answer №1

If you need to maintain the position: absolute attribute, here is how you can do it:

Make changes to your ListPerspective.vue:

  <ul class="mx-auto">
    <ListPerspectiveItem
      v-for="(alert, index) in alerts"
      :key="alert.id"
      :index="index"
      :alert="alert"
      :totalElements="alerts.length"
      :verticalShift="15"
      @close="remove(index)"
    />
    <div :style="notificationMsg"><slot></slot></div>
  </ul>

Include a slotted list element at the end and add a computed style as follows:

  data() {
    return { verticalShift: 15 }
  },
  computed: {
    notificationMsg() {
      return `position: absolute; top: ${(this.alerts.length + 1) * this.verticalShift}px; margin-top: 20px;`;
    }
  }

This calculates the total distance from the top of the component to position your message below notifications.

Unfortunately, you will need to define the verticalShift in your parent (ListPerspective) component and pass it as a prop to ListPerspectiveItem. Consider creating a simple store with basic configurations like these instead of hardcoding the default value 15 in your ListPerspectiveItem, fetch it from store, and do the same in the ListPerspective component, e.g.:

data() { 
// Usually bind store state properties as computed properties,
// but for constants like default variables, no need to watch for changes
  return { verticalShift: this.$store.state.defaults.css.verticalShift }
}


verticalShift: {
  type: Number, default: this.$store.state.defaults.css.verticalShift
}

The last step is to update your App.vue by adding your message to the slot:

  <ListPerspective>
      Click the &times; button to remove a message
  </ListPerspective>

Example

Answer 2

If you need to maintain the position: absolute attribute, here is how you can do it:

Make changes to your ListPerspective.vue:

  <ul class="mx-auto">
    <ListPerspectiveItem
      v-for="(alert, index) in alerts"
      :key="alert.id"
      :index="index"
      :alert="alert"
      :totalElements="alerts.length"
      :verticalShift="15"
      @close="remove(index)"
    />
    <div :style="notificationMsg"><slot></slot></div>
  </ul>

Include a slotted list element at the end and add a computed style as follows:

  data() {
    return { verticalShift: 15 }
  },
  computed: {
    notificationMsg() {
      return `position: absolute; top: ${(this.alerts.length + 1) * this.verticalShift}px; margin-top: 20px;`;
    }
  }

This calculates the total distance from the top of the component to position your message below notifications.

Unfortunately, you will need to define the verticalShift in your parent (ListPerspective) component and pass it as a prop to ListPerspectiveItem. Consider creating a simple store with basic configurations like these instead of hardcoding the default value 15 in your ListPerspectiveItem, fetch it from store, and do the same in the ListPerspective component, e.g.:

data() { 
// Usually bind store state properties as computed properties,
// but for constants like default variables, no need to watch for changes
  return { verticalShift: this.$store.state.defaults.css.verticalShift }
}


verticalShift: {
  type: Number, default: this.$store.state.defaults.css.verticalShift
}

The last step is to update your App.vue by adding your message to the slot:

  <ListPerspective>
      Click the &times; button to remove a message
  </ListPerspective>

Example

Answer 3

Answer №2

Instead of using position:absolute, you may want to consider using margin-top property.

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  margin-top:-12px;
  margin-bottom:4px;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that should be after the list</p>

UPDATE

You can also try using transform on hover:

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  transform:translateY(-5px);
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that should be after the list</p>

Answer 4

Instead of using position:absolute, you may want to consider using margin-top property.

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  margin-top:-12px;
  margin-bottom:4px;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that should be after the list</p>

UPDATE

You can also try using transform on hover:

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  transform:translateY(-5px);
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that should be after the list</p>

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Answer №1

Answer №2

Similar questions

Vue-resource: Origin header validation error

The presence of parentheses in a JQuery selector

Is there a way to change the text (price) when I select an option?

Is it possible to invoke a JavaScript function from within a CSS file?

Modify the name of the selected option value

When the page is refreshed, reorienting axes in three.js encounters difficulties

What is the significance of $($(this)) in coding jargon

Access SCSS variable values in Angular HTML or TypeScript files

Is it possible to show one element while hiding others upon clicking using JavaScript?

Connecting UserIDs with Embedded Documents in Mongoose

What causes the website to malfunction when I refresh the page?

The CSS property overflow-x:hidden; is not functioning properly on mobile devices despite trying multiple solutions recommended online

Choosing Only the Visible Element with CSS

Discover the web link for Vue.js 3 Composition API image online

Tips for managing input for objects in Vue when the object hasn't been declared yet?

"Creating eye-catching popup images in just a few simple steps

Multiple jQuery AJAX requests triggered in a click event handler

Give it a little time before uploading a widget onto the page

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Tips for centering content in the middle of a line