AlertBox inside modal

[jemz]

Hi can I ask some help please. If I scroll my list view modal to bottom then press “add to cart” my alert notification is displaying on top, and it’s not visible to the view. I set the position to static so that my notification box will follow if I will scroll, but it’s not working.

Thank you in advance.

Here is my pen

[PaulOB]

Yes you can’t have a fixed box inside a fixed box when there are transforms applied because transforms create a new stacking context even for fixed elements (rather than the viewport being the parent).

If you removed the transforms from the modal then fixed positioning inside the box would be related to the viewport and not the modal but perhaps it would be better with a sticky box instead.

e.g.

.alert-notification.top-right {
  position: fixed;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  margin-left:auto;
  margin-bottom:-100%;/* bit of a hack to overlay content*/
}
.alert-notification{ 
    max-width: 320px;
    min-width: 310px;
    cursor: pointer;
    padding: 20px;
    background-color: #1e0f59;
    color: white;
    border: solid 2px #1e0f59;
    z-index: 1055;
    border-radius: 3px;
    display:none;
}

[jemz]

Hi Paul,

Thank you, but when the notification box will show my layout will destroy it will push down my div that contains the images.

Here is the pen

Thank you in advance.

[PaulOB]

If you are talking about the slight margin on the column when the cart is open then try adding float to the cart .

e.g.

.alert-notification.top-right {
  position: fixed;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  margin-left:auto;
  margin-bottom:-100%;/* bit of a hack to overlay content*/
  float:right;
}

That should allow the margin to slide underneath and the columns stay level.

It’s a bit of hack but other than removing the transform on the modal or moving the alert html out of the modal then i don’t think you have much choice.

[jemz]

Hi Paul,

Thank you it works adding float right.

It’s a bit of hack but other than removing the transform on the modal or moving the alert html out of the modal then i don’t think you have much choice.

Ok I will try to move out the notification HTML to the modal.

[jemz]

Hi Paul

Thank you I tried to move the notification HTML outside to the modal and I revert my CSS, it works fine