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 )
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
Toast is overlapped by the layout-topbar
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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?
Best Regards,
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;
}
Github Profile: https://github.com/mertsincan
-
- Posts: 19
- Joined: 05 Jun 2020, 10:59
- Location: Hungary
Hello,
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:
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?
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 });
I think it would be better to use the top css attribute.
Can you help me, how can I make it globally?
-
- Posts: 19
- Joined: 05 Jun 2020, 10:59
- Location: Hungary
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?
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?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Best Regards,
- Good catch! Fixed now.the "-" is missing at "topright": "top-right" is the correct.
- 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.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?
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest