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

Restrict the number of rows in a CSS grid

I'm having trouble getting rid of this stubborn loader on the website

Angular-ui-bootstrap modal failing to display provided data

CAUTION: Attempted to initialize angular multiple times...all because of jQuery...such a puzzling issue, isn

`Incorporating JavaScript for Menu Navigation on the Homepage: Challenges Ahead`

Maintaining the initial value of a textbox in jQuery across various focusin events

The Express.js server seems to be having trouble rendering a static JavaScript file

Save the output of a function in node.js

NuxtJs: Oops! It looks like NuxtError is not defined in this context

The instance does not have a definition for the property or method "names" that is being referenced during rendering

GraphQL/Relay Schema "Field cannot be queried..."

Enhancing the visual display of a webpage using AngularJS

Position the background of the container in the center and keep it

The initial setTimeout function functions correctly, however the subsequent ones do not operate as expected

Is the element loaded but not appearing on screen?

The function `React.on('languageChanged')` is not effectively detecting changes in the language

What impact do media queries have on scaling web pages?

transferring data from grails to javascript via a map

Discovering the power of ng-change in an Angular typeahead search functionality

Accessing variables from outside the query block in Node.js with SQLite