Tips for creating floating and right-aligned notifications using CSS in Vue.js

Struggling to position my basic notification component in the top right corner. Here is my HTML:

<div class="notifications">
  <p>{{ notification.message }}</p>
</div>

This is my notifications class:

.notifications {
  position: relative;
  right: 10px;
  top: 10px;
  width: 100px;
  z-index: 1;
  color: black;
  padding: 5px;
  background-color: red;
  border-radius: 5px;
  margin-bottom: 5px;
}

The notifications are showing up at the bottom left of the screen in this version https://jsfiddle.net/fb343fh6/

Here's another attempt:

.notifications {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 100px;
    z-index: 1;
    color: black;
    padding: 5px;
    background-color: red;
    border-radius: 5px;
    margin-bottom: 5px;
}

In this version, the notifications correctly appear in the top right, but only one notification displays https://jsfiddle.net/762gg0bm/

Note - Using vue.js as my front end framework

Any help would be appreciated. Thank you!

htmlcssvue.js

Answer №1

Your notifications are currently overlapping because they all have the same position set in the style. By using vue.js, you can dynamically change their positions. For instance, I have added a random left style to the notification div as an example. You can view the demonstration here.

JavaScript:

  methods: {
    addNotification () {
      this.notifications.push({ message: 'Some error message...', leftPos: Math.random() * 500 })
      this.notification_count += 1
    }
  }

HTML:

<template id="notification">
  <div class="notifications" :style="{left: notification.leftPos + 'px'}">
    <p>{{ notification.message }}</p>
  </div>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why won't my Java servlet code execute?

included the directory structure To facilitate adding two numbers and displaying the result upon clicking a submit button, I developed a straightforward Java servlet. This servlet retrieves the necessary information when called. The development environmen ...

javascriptjavajqueryhtmlajax

Can TypeScript be implemented within nuxt serverMiddleware?

I recently began diving into the world of nuxtjs. When setting up, I opted to use typescript. Initially, everything was running smoothly until I decided to incorporate express in the serverMiddleware. Utilizing the require statement to import express funct ...

node.jstypescriptexpressvue.jsnuxt.js

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

The flex container cannot contain all of the content due to an

I am looking to implement a flexbox dropdown menu similar to this: After researching online, I found a simple dropdown menu example. However, I want to customize it using flexbox and its properties. The issue I encountered is that the flexbox container do ...

htmlcssflexbox

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

javascripthtmlclient-side

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing: At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenu ...

htmlcsshtml-table

Contrast between v-for arrangements

Would anyone be able to clarify the distinction between these two v-for structures? <li v-for="item in items" :key="item"> </li> and <li v-for="(item, i) in items" :key="i"> </li> ...

javascriptvue.jsvuejs2

Using svg.js within a Vue component

I'm experiencing a major issue when trying to integrate the SVG.js library into my project. Even after adding it, I am still unable to draw anything on the page. Here are the relevant files in my project: -public/index.html <!DOCTYPE html> < ...

vue.jssvg.js

The $.post method is malfunctioning

I am experiencing an issue where the onchange function is working properly, but the $.post function is not functioning as expected. Below is the HTML code snippet: <input type="checkbox" id="chk" value="3" onchange="checkradio(this.value)"/> Here ...

javascriptphphtmlajax

What technique is used in this CSS code to give each line of text a unique horizontal color gradient?

I stumbled upon a fascinating jsfiddle that can create color gradients on specific lines of text. Each line has a unique two-color gradient applied in a consistent pattern: Black to Red, Red to Black, Black to Blue, and Blue to Black. Despite its intrigui ...

css

Looking to assign a variable to the value selected from a dropdown menu in PHP/HTML

As a beginner in php and html, I have been tasked with creating a drop down list along with other inputs to establish parameters for a perl script. The objective is for the selected option from the drop-down menu to set a variable equal to the user's ...

phphtmldrop-down-menu

Access all areas with unlimited password possibilities on our sign-in page

I have set up a xamp-based web server and installed an attendance system. I have 10 users registered to log in individually and enter their attendance. However, the issue is that on the login page, any password entered is accepted without showing an error ...

javascriptphphtml

Achieving consistent column heights in Bootstrap by aligning neighboring columns

I am striving to achieve a layout similar to this: https://i.sstatic.net/HIEB4.png However, in Bootstrap, I am currently getting this: https://i.sstatic.net/sLw1v.png My desired layout specifications are as follows: Width ratios should be in the propor ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with displaying content using v-show in a Nuxt.js menu

Struggling to create a mobile menu with Vue instance error The Nuxt Menu Component : <template> <header id="menu" class="menu-g"> <Nuxt-link to="/"><img src="~assets/logo.svg" alt=&qu ...

javascriptvue.jsvuejs2nuxt.js

Enhancing WordPress Menu Items with the 'data-hover' Attribute

Looking for a solution to add "data-hover" to menu items on Wordpress, like: Wanting to insert: data-hover="ABOUT US" into <a href="#">ABOUT US</a> without manually editing the link's HTML to make it: <a href="#" data-hover="ABOU ...

javascriptjqueryhtmlcsswordpress

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

javascripthtmlbillboard.js

HTML: Mark the chosen hyperlink or tag

In my HTML page, I am looking to keep the link selected when it is clicked on. Here is the initial HTML code: <table class="main-dev"> <tr> <td> <a class='titleForm' style="cursor:pointer"> ...

javascripthtmltypescript

EaselJS - Utilizing multiple canvases with varying frame rates

Currently, I am exploring EaselJS by creating two animation instances using sprite sheets on two separate canvases positioned at different locations but with the same z-index. The issue I am facing is that these instances are not layered properly. My setup ...

javascripthtmleaseljs

Expanded MUI collapsible table squeezed into a single cell

I'm experimenting with using the MUI table along with Collapse to expand and collapse rows. However, I've noticed that when utilizing collapse, the expanded rows get squished into one cell. How can I adjust the alignment of the cells within the p ...

javascriptcssreactjsmaterial-ui

The Framework of Vuex Modules

After searching through various tutorials and examples, I couldn't find a solution for my specific situation. While I understand that developers have flexibility in structuring their code, I'm curious to know the best approach for the following s ...

vue.jsvuex