Comments (4)
@vladimir-cucu Thanks. I will have a look if we can remove z-index from notifications (and/or highlight bars).
But overall, to avoid such issues, I'd suggest not using z-index of 1 on anything that is supposed to be on top of other things. We don't have any solid guidelines around that, as this is always kind of a chicken-and-egg problem of finding things that are supposed to be on top of each other and those that don't.
We have this example which features various of overlaying elements in Vanilla: https://vanillaframework.io/docs/examples/templates/z-index
You can use that to have a look at their z-indexes.
Overall modals, etc (on top of everything) use 100 or above.
Tooltips are at 11. Contextual menu at 9.
Top navigation (dropdowns) are at 5.
Flat content may have things at 1.
Based on that I'd suggest placing your top navigation somewhere between 5-10.
from vanilla-framework.
@bartaz Thanks for the detailed explanation! We'll set the z-index
to 5 as suggested.
from vanilla-framework.
Based on that I'd suggest placing your top navigation somewhere between 5-10.
Just in case it's not clear, that top nav is from the application layout and the z-index
is set to 1
here: https://github.com/canonical/vanilla-framework/blob/main/scss/_layouts_application-panels.scss#L24.
Should we update the sticky header z-index
to 5
in Vanilla to fix it for everyone or is that likely to cause other issues?
from vanilla-framework.
Ah, sorry. I was looking for that into application layout, but missed that it's only in sticky option in panels.
Of course it makes sense to fix it directly there.
from vanilla-framework.
Related Issues (20)
- Application Layout / Default example's table tooltips don't allow proper overflow
- Sortable table has ascending and descending functionality/indicators swapped
- Article pagination component prev & next selectors use rotated chevrons
- Add expand functionality to Code snippet HOT 2
- Align colors for Input background and Code background HOT 1
- Make modal padding match grid row padding across all breakpoints HOT 1
- p-logo-section--dense: can we make the logo sizes 6.5rem (104px) HOT 2
- Image container aspect ratios do not apply on small screens HOT 1
- Navigation scripts are not well-encapsulated
- p-navigation logo shape and icon not spaced correctly
- Equal heights component: subgrid on medium has more columns than needed HOT 2
- Positive button's focus in invisible on dark theme HOT 4
- Paper theme alternate background should be darker, not white HOT 1
- Limit all headings to 40rem, same as paragraph text HOT 1
- Navigation dropdowns do not report expanded/collapsed state
- Sidenav example broken
- Nested Grid example contains incorrect text labels
- Divided list: use nudge padding top (.4rem) instead of .5rem, and nudge compensation at the bottom instead of 1rem HOT 1
- Space character causes unexpected spacing in Search & Filter examples HOT 1
- duplicate padding declaration on cards HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vanilla-framework.