CODEWITHSUNDEEP
htmlcss
riderken
riderken

Reputation: 99

aligning toast messages in css

I wanna align the toast messages to the bottom left corner and when there's more than one message, I wanna move them upward with a gap of about 10px from each individual message so that all of them are readable and is in the same bottom-left position but currently when I change the position to anything else other than "fixed" it goes on top and the width doesn't rely on the padding anymore and "fixed" makes a message appear on top of another. thnx for any help!

.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);
}

Upvotes: 0

Views: 1254

Answers (1)

sas
sas

Reputation: 532

You need some js code with it to determine the position of the next toasts. I think this is what you were asking.

And as @GetSet said it will be better if you use a toast library. Even Bootstrap has its own.

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>

Upvotes: 3

Related Questions