svelte-notifications icon indicating copy to clipboard operation
svelte-notifications copied to clipboard

zIndex doesnt work

Open wvanrensburg opened this issue 1 year ago • 0 comments

Setting the zIndex property on the <Notifications tag has no effect.

Example:

<Notifications zIndex={100}>
... stuff
</Notifications>

results in...

<div class="notifications">
  <div class="position-top-left default-position-style-top-left"></div>
  <div class="position-top-center default-position-style-top-center"></div>
  <div class="position-top-right default-position-style-top-right"></div>
  <div class="position-bottom-left default-position-style-bottom-left"></div>
  <div class="position-bottom-center default-position-style-bottom-center"></div>
  <div class="position-bottom-right default-position-style-bottom-right"></div>
</div>

According to your source code, its supposed to add a style, but Im assuming that the hyphen in your source is failing. https://github.com/keenethics/svelte-notifications/blob/master/src/components/Notifications.svelte#L72

Secondary issue, is even if a style was added, it wouldnt work as its deemed a static position. It would have to be combined with a position.

Workaround: add a style in CSS

div.notifications {
  z-index: 999;
  position: relative;
}

wvanrensburg avatar Sep 17 '24 22:09 wvanrensburg