Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make sure notifications are always on top #143

Open
call-me-matt opened this issue Jul 27, 2020 · 6 comments
Open

Make sure notifications are always on top #143

call-me-matt opened this issue Jul 27, 2020 · 6 comments
Labels
bug Something isn't working

Comments

@call-me-matt
Copy link

When triggering a OC.Notification.showTemporary, I realized it is not always on top?

grafik

Expected behavior:
Notification has a higher z-index than Modal

@skjnldsv skjnldsv added the bug Something isn't working label Jul 27, 2020
@ChristophWurst
Copy link
Contributor

@nextcloud/designers is there a sane value for the z-index? Would there ever be anything above the toast?

@skjnldsv
Copy link
Contributor

Well, we really have no global list of zindex, so it's kind of everyone is doing their own sh** 🙈

@jancborchardt
Copy link

The other issue is that even if it has a proper z-index, it would then overlay the modal controls. So we would possibly have to move it to the left/bottom too?

@skjnldsv
Copy link
Contributor

well, this is a live temporary heads up, I think it's fair to have it on top?

@jancborchardt
Copy link

Sure – we can always see for further enhancements anyway. :)

@susnux
Copy link
Contributor

susnux commented Jul 1, 2023

Not sure how bad this is performance wise, but theoretically:

findZIndex() {
    // Get all elements
    return [...document.querySelectorAll('body *')]
        // use getComputedStyle to also include zIndex from stylesheets
        .map(el => parseFloat(window.getComputedStyle(el).zIndex))
        // Reduce to get only the highest value
        .reduce((current, z) => z > current ? z : current, 1)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants