Contrib.social

z-index of .layout-main-wrapper causes problems with Cookies modal dialog placed inside .site-footer

Open on Drupal.org →
Created on 23 June 2023, almost 2 years ago
Updated 5 July 2023, almost 2 years ago

Problem/Motivation

The Cookies module provides a modal dialog so that the user can give consent to different cookie categories.

Expected: The modal dialog of the Cookies module supposed to be on top of the main content of the page.

Actual: The dialog is below the main content. See screenshot.

This issue was investigated in the Cookies issue queue in 📌 Document that COOKiES UI block should be placed in Content Below region when using Olivero theme Active . The root cause of this behavior is as follows.

The issue is that .site-footer is a parent of .cookiesjsr-layer and the z-index of .site-footer is 1. This is defined in layout-footer.css:31 (on Drupal 10.0.9).

However, .layout-main-wrapper, which is a sibling of .site-footer, has a higher z-index 2, which is defined in layout.css:50. This means that the .site-footer is always under .layout-main-wrapper.

Looking at the inline comments of the Olivero layout.css, this seems to be intentional:

.layout-main-wrapper {
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

Questions:

2. Is there anything that the Cookies module can do differently?
3. Or is there anything that Olivero can do differnetly?

Steps to reproduce

Use Drupal 10.0.9 together with the Cookies module and observe the conflict described above.

Proposed resolution

Remaining tasks

To be defined

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Closed: works as designed

Version

10.0 ✨

Component
Olivero  →

Last updated 3 days ago

Created by

🇫🇮Finland masipila

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @masipila
  • Comment almost 2 years ago →
    🇫🇮Finland masipila
  • Comment almost 2 years ago →
    🇫🇮Finland masipila

    Okay, found the answer to my first question. The drop-down that this Olivero z-indexing is addressing is this: 🐛 Olivero footer can obscure bottom of dropbutton dropdown Fixed

    Do we have other options to address the drop-down issue than explicitly setting the whole .layout-main-wrapper to have a higher z-index than .site-footer?

  • Comment almost 2 years ago →
    🇫🇮Finland masipila
  • Comment almost 2 years ago →
    🇫🇮Finland masipila
  • Status changed to Postponed: needs info almost 2 years ago
  • Comment almost 2 years ago →
    🇫🇮Finland lauriii Finland

    Would you be able to place the cookie banner in a block that is rendered in the main layout? This would most likely address the problem. The footer z-index is currently set as such that it will always render behind main content.

  • Status changed to Closed: works as designed almost 2 years ago
  • Comment almost 2 years ago →
    🇫🇮Finland masipila

    Hi @lauriii, thanks for the suggestion!

    I tried moving the COOKiES UI block to the "Content below" region in Olivero and indeed the modal dialog now opens on top of the other layers as expected.

    It's quite typical that the sites want to still have a hyperlink in the footer which points to #editCookieSettings (when using the COOKiES module) so that the user can manually open the modal dialog to change the cookie preferences. But this is completely OK with your proposed resolution because the modal dialog itself is now in "Content below" region.

    I'm marking this as closed here on the Olivero side and will comment on 📌 Document that COOKiES UI block should be placed in Content Below region when using Olivero theme Active so that this configuration will be added to COOKiES documentation.

    Even though my comment here is specific to COOKiES modal dialog, I would say that this should be accepted as a generic answer because the modal dialog would be invisible when it's closed and it will be positioned separately when it's open. In other words, it really doesn't matter where the block providing the modal dialog is placed.

    Cheers,
    Markus

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024