Creating perfectly spaced toast messages with CSS styling

I am trying to customize the alignment of my toast messages to the bottom left corner. Ideally, I want them to stack on top of each other with a small gap of 10px between each message, ensuring that they are all visible and readable. Currently, changing the position attribute to anything other than "fixed" causes the messages to appear on top of each other, losing the padding width. When set to "fixed," the messages overlap. Any suggestions for resolving this issue would be greatly appreciated. Thank you!

.success{
    display: block;
    position: fixed;
    bottom: 0;
    margin-bottom: 10px;
    margin-left: 4%;
    font-family: Arial;
    padding: 15px;
    background-color: forestgreen;
    color: #FFFFFF;
    border-radius: 4px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.info{
    display: block;
    position: fixed;
    bottom: 0;
    margin-bottom: 10px;
    margin-left: 4%;
    font-family: Arial;
    padding: 15px;
    background-color: blue;
    color: #FFFFFF;
    border-radius: 4px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
htmlcss

Answer №1

To accurately determine the placement of the upcoming toasts, incorporating some JavaScript code is necessary. It seems like this was the query you had in mind.

Additionally, as mentioned by @GetSet, it is recommended to make use of a toast library. Even frameworks like Bootstrap offer their own versions.

let margin = 10;
const showToast = (type) => {
  const toast = document.getElementById(`toast-${type}`);
  toast.style.display = 'block';
  toast.style.marginBottom = `${margin}px`;
  margin += toast.clientHeight + 5;
  hideToast(toast);
}
const hideToast = (toast) => {
  setTimeout(() => {
    toast.style.display = 'none';
    margin -= toast.clientHeight + 5;
  }, 5000); // Toast disappears after 5 seconds
}

showToast('success');
showToast('info');
.success {
  display: none;
  position: fixed;
  bottom: 0;
  margin-bottom: 10px;
  margin-left: 18vw;
  font-family: Arial;
  padding: 15px;
  background-color: forestgreen;
  color: #FFFFFF;
  border-radius: 4px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  width: 60vw;
}

.info {
  display: none;
  position: fixed;
  bottom: 0;
  margin-bottom: 10px;
  margin-left: 18vw;
  font-family: Arial;
  padding: 15px;
  background-color: blue;
  color: #FFFFFF;
  border-radius: 4px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  width: 60vw;
}
<div id="toast-success" class="success">Success</div>
<div id="toast-info" class="info">Info</div>

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

Automatic Expansion Feature for HTML Tables

http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...

javascriptjqueryhtmlmysqlcss

How to divide an HTML string into an array using PHP

I am in need of some assistance from you all. The issue I am facing involves dealing with a string of HTML that looks like this: <h4>Some title here</h4> <p>Lorem ipsum dolor</p> (some other HTML here) <h4>Some other title ...

phphtmlarraysaccordiondomdocument

What is the best way to update specific content with fresh URLs?

I am interested in keeping certain sections of my page static, such as the header and footer, while allowing the main content to change dynamically. Additionally, I would like the URL to update based on the new content being displayed. Although I am famil ...

htmlurlpartial

Loop through each div using jQuery and dynamically add or remove a class to

I am looking to create an infinite loop that adds a class to each div with a timeout in between. Currently, I have implemented it like this: $(document).ready(function() { $('.small-bordered-box').each(function(i) { var $t = $(this); ...

javascriptjqueryhtmlcss

Why is it that the default theme of Material UI lacks any stylization at all?

After experimenting with both Carbon Design for React (@carbon/react) and Material UI (@mui/material) in conjunction with Next.js, I encountered styling issues with the components. While they functioned correctly to some extent, there were noticeable discr ...

cssreactjsnext.jsmaterial-uitailwind-css

Utilizing XPath to retrieve text from a hyperlink

I'm currently using Python with Xpath to scrape Reddit, specifically working on extracting links and displaying their titles on the front page. To do this, I'm utilizing the Scrapy framework and conducting tests in the Scrapy shell. I'm stru ...

pythonhtmlxpathscrapy

Is there a way to modify the background shade of an HTML meter element?

Can the background color of an HTML meter be customized? I noticed that by default, it has a green background. Is there a way to change this green background to a different color? I attempted using the style attribute with a red background color, but it ...

htmlcss

Converting canvas illustrations into HTML files

I am in the process of creating a drawing application that will be able to export into HTML/CSS/JavaScript. I plan to use this tutorial as a foundation for the drawing functionality. My goal is to take all the rectangles within the this.shapes = [] array a ...

javascriptcsshtml

The cube mesh is failing to render inside the designated div

I created a Torus and Cube Mesh in my scene, but I want the cube to be positioned at the bottom right corner of the screen. Here's what I tried: <div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; "> & ...

javascriptcsshtmlthree.js

Is there a way to style the nav-item element specifically on the current page I'm viewing?

I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page). https://i.sstatic.net/maDzc.png This is the HTML code I am usin ...

htmlcssvue.jsnuxt.jsbootstrap-vue

What is the best way to progressively load sections of an HTML table?

I'm facing an issue with a table that is rebuilt asynchronously every time a new option is chosen from a dropdown. The HTML generation works fine, but sending it back across the wire breaks when the size is too large. One idea I had was to query sect ...

jqueryhtmlajaxtwitterhtml-table

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...

javascripthtmlvue.jsgridvuetify.js

Utilize the display property with grid to effortlessly expand a block to occupy the entire width

I am currently exploring the grid system and I have a specific challenge. I would like the third block to expand to its full width without the need for extra classes. Can this be achieved using only internal CSS? .grid { margin: 36px auto; height: ...

csscss-grid

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

I am working with a Material-UI tab component and I would like to include a tooltip feature. The issue I am facing is that the tooltip does not disappear when I click on the tab. It should hide after clicking on the tab. Currently, the tooltip remains vi ...

javascripthtmlcssreactjsmaterial-ui

Finding the identification of the first element within a nested div using JQuery

Here is the HTML snippet that I am working with: <div id="parent"> <div id="computer"> <div id="items"> <div id="1">hp</div> <div id="2">compaq</div> <div id="3"& ...

javascriptjqueryhtml

Ways to perfectly position a bootstrap well in the center

https://i.sstatic.net/b3g46.pnghttps://i.sstatic.net/osPzb.png Having trouble aligning this image with the center of the page. It should be a straightforward task, but for some reason, I can't seem to get it right. ...

csstwitter-bootstrap

Utilize JSON data fetched from a URL to dynamically populate an HTML content

There is a JSON file located at a URL that looks like this: [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124", "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank" ...

javascripthtmljson

The CSS file is not connecting properly despite being located within the same directory

I have double-checked that both of these files have the correct names and are in the exact same directory. However, for some mysterious reason, the CSS is not applying any styling to my page. I would greatly appreciate any assistance with this issue! Belo ...

htmlcssexpress

What is the largest image dimension allowed for website use?

What are the dimensions in pixels and file size in MB? I've been curious about this for a while, appreciate any insights! ...

htmlcssimage

Unable to precisely reach the very bottom of the scrollbar

When trying to move to the bottom of the scrollbar, I seem to reach a bit higher than the actual bottom. https://i.stack.imgur.com/Vt83t.png Here is my code: ws.onmessage = function (event) { var log = document.getElementById('log') ...

javascriptcss