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.

Sign up for GitHub

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

Jump to bottom

CMS z-index is too low #252

Open
notramo opened this issue Jan 7, 2023 · 4 comments
Open

CMS z-index is too low #252

notramo opened this issue Jan 7, 2023 · 4 comments

Comments

@notramo
Copy link

notramo commented Jan 7, 2023

If the page uses a z-index greater than 0, it overlaps with the CMS. The CMS should use the highest possible z-index.
@jimafisk
Copy link
Member

jimafisk commented Jan 8, 2023

This makes sense, I think I was just trying to avoid an ever escalating z-index battle.

The general plan is to have the least specific CSS defaults as possible, so the CMS takes on the character of the project and is easy to override. My hope is that all you would have to do is drop in your own /static/admin.css file to completely reskin the editing experience. I need to add better CSS classes (and stop changing them so often) to make this possible. In this case having a higher z-index won't make the style more specific (harder to override), so I agree it's a good idea for a better out-of-the-box experience.

@notramo
Copy link
Author

notramo commented Jan 19, 2023

@jimafisk If you don't have time for it, I could try to implement it. Where should I look for the index definitions?

@jimafisk
Copy link
Member

Hi @notramo,

I just took a look, it seems like our nav currently has a z-index: 10;:

plenti/defaults/core/cms/admin_menu.svelte

Line 202 in c585291

z-index: 10;

The .sidenav has a z-index: 1;:

plenti/defaults/core/cms/admin_menu.svelte

Line 226 in c585291

z-index: 1;

And our .modal-wrapper class has a high value: z-index: 99999;:

plenti/defaults/core/cms/admin_menu.svelte

Line 262 in c585291

z-index: 99999;

Those values generally seem appropriate to me, although I'd honestly prefer to lower the modal wrapper to 20. The sidenav could be a little higher (maybe 5) but as long as you don't have style bleeding in from your app, the sidenav shouldn't actually overlay anything. In most cases I'd agree that users will want the Plenti admin functionality to appear above other elements, but there could be situations where someone intentionally wants their custom project to have visibility over the admin menus themselves.

In cases where site elements are appearing above the Plenti admin menus undesirably, I would attempt to do the following:

  1. First try and adjust the styling of the project to lower runaway z-indexes to rational levels using techniques like these.
  2. If that doesn't work, override the defaults styles for the admin menu in a static/global.css file using nav, .sidenav, and .modal-wrapper to increase the z-index.

I do think that we should add an admin-menu class to the nav element to make style overrides easier:

plenti/defaults/core/cms/admin_menu.svelte

Line 49 in c585291

<nav>

I also usually wrap my custom HTML/CSS in a <main> tag inside the <body> to make it easier to target global styles to my custom app without bleeding over to the admin side of things. Possibly that could help with how the elements are appearing currently.

Are you pulling in a style framework like Bootstrap or Foundation? Those can often be quite heavy-handed with their implementations of these things.

@jimafisk
Copy link
Member

@notramo were you able to get a z-index override working for your project?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jimafisk @notramo