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

Fix search modal z-index to be on top of all docs showcased components #36627

Merged

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Jun 23, 2022

Search modal currently has a z-index set to 1030. That makes it under some showcased components in the documentation; especially the ones that stay displayed even if one clicks outside of it.

Here are two examples, popover and toast:

Screenshot from 2022-06-23 19-51-41
Screenshot from 2022-06-23 19-50-56

In _variables.scss we have this list of z-indexes:

$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-offcanvas-backdrop:         1040 !default;
$zindex-offcanvas:                  1045 !default;
$zindex-modal-backdrop:             1050 !default;
$zindex-modal:                      1055 !default;
$zindex-popover:                    1070 !default;
$zindex-tooltip:                    1080 !default;
$zindex-toast:                      1090 !default;

I chose 2000 as a value here (maybe too extreme) just to be sure that it will always work in the future.

Live previews

Thanks @louismaximepiton for this catch

@mdo mdo force-pushed the main-jd-make-sure-search-modal-is-over-everything branch from 80cffd5 to 18675e7 Compare June 28, 2022 03:58
@julien-deramond julien-deramond merged commit 828034f into main Jun 28, 2022
@julien-deramond julien-deramond deleted the main-jd-make-sure-search-modal-is-over-everything branch June 28, 2022 05:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants