Toast is overlapped by the layout-topbar

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
bodnarlajos
Posts: 19
Joined: 05 Jun 2020, 10:59
Location: Hungary

26 Oct 2020, 19:44

https://www.primefaces.org/serenity-vue/#/messages

1. e.g. click on Grow -> Success
2. see the Toast moves behind the layout-topbar

How can I fix this? ( would be nice to fix theme :roll: )

I tried to give baseZIndex: 999999 to my toast as layout-topbar has z-index: 999997 - it didn't work.

Btw, it would be nice to position the toast below the layout-topbar with .p-toast-top-right { top: 80px; } - how can I configure it?

Thank you in advance,
Lajos

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Oct 2020, 09:00

Hi,

I tried this issue with baseZIndex: 999999. It works fine for me. What PrimeVue and Serenity-Vue version are you using? Could you please try it with our sample project?

Code: Select all

<Toast baseZIndex.number="999999" />

OR 

.p-toast-top-right {
    top: 80px;
}
Best Regards,

bodnarlajos
Posts: 19
Joined: 05 Jun 2020, 10:59
Location: Hungary

28 Oct 2020, 13:07

Hello,
What PrimeVue and Serenity-Vue version are you using?

PrimeVue: 3.0.1.
I downloaded 2.0.0.

Before I tried to put the parameter into it's API - now I know it's wrong:

Code: Select all

this.$toast.add({severity:'success', summary: 'Siker!', detail: 'Frissítve!', life: 30000, baseZIndex: 9999999 });
Now I see at https://primefaces.org/primevue/showcase/#/toast, that this baseZIndex is not at his API but at its Properties, thank you for your answer!

I think it would be better to use the top css attribute.
Can you help me, how can I make it globally?

bodnarlajos
Posts: 19
Joined: 05 Jun 2020, 10:59
Location: Hungary

28 Oct 2020, 23:40

Ok, I looked into the documentation to find the answer.

AND I think I've found the bug of Serenity:

/src/App.scss:
/* Custom toast location */
.p-toast.p-toast-topright {
top: 70px;
}

the "-" is missing at "topright": "top-right" is the correct.

What I don't understand (which I know it could be an other topc): why it doesn't work in _layout_styles.scss or _theme_styles.scss?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

30 Oct 2020, 10:20

Hi,
the "-" is missing at "topright": "top-right" is the correct.
- Good catch! Fixed now.
What I don't understand (which I know it could be an other topc): why it doesn't work in _layout_styles.scss or _theme_styles.scss?
- It works fine for me in _*_styles.scss. When you change these files, you need to provide new css files using SASS command in the documentation.

Best Regards,

Post Reply

Return to “Serenity - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests