Problem/Motivation

When having the cookie banner appear at the top of the page, but on pages where it should be hidden (eg. Hide on Admin pages) the banner moves to display above the admin toolbar, with the extra padding where the banner would be on body tag. It looks like the cookie banner is trying to hide itself with a minus margin, but becuase the admin toolbar pushes the body tag down with padding the banner ends up displaying over admin toolbar.
I have seen this effect with Gin, Adminimal, Claro and Seven as admin themes.

Screenshot showing cookie banner overlaying the admin toolbar

Steps to reproduce

Enable the Cookie banner and select position as top.
Do not select 'If the banner is at the top, don't scroll the banner with the page.'
Enable at least one of 'Exclude admin pages', 'Don't show the banner for site administrators (including UID 1).' or add an admin path to Exclude paths.

CommentFileSizeAuthor
#5 eu_cookie_banner_hidden_on_admin_claro.png151.78 KBandybroomfield
#5 eu_cookie_banner_hidden_on_admin.png145.9 KBandybroomfield
#5 eu_cookie_banner_in_correct_postion_when_on_main_dev_branch.png179.92 KBandybroomfield
#5 eu_cookie_banner_ffloating_aboive_toolbar.png137.29 KBandybroomfield
Screenshot 2021-10-12 at 9.34.55 am.png155.88 KBandybroomfield

Issue fork eu_cookie_compliance-3243001

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

andybroomfield created an issue. See original summary.

svenryen’s picture

svenryen commented

Thanks for the report, we'll take a look. This issue might also affect 7.x.

svenryen opened merge request !43

svenryen’s picture

svenryen commented
Status: Active » Needs review

@andybroomfield, first of all, thanks a lot for placing the banner at the top and reporting this bug. We need users with all configurations, and the top position hasn't been as thoroughly tested as it should.

I made an issue branch. It would be great if you can try it out and report back how it performs for you. Here's also a patch file if you prefer to use that: https://git.drupalcode.org/project/eu-cookie-compliance/-/merge_requests...

andybroomfield’s picture

andybroomfield
they/them
commented
StatusFileSize
new eu_cookie_banner_ffloating_aboive_toolbar.png137.29 KB
new eu_cookie_banner_in_correct_postion_when_on_main_dev_branch.png179.92 KB
new eu_cookie_banner_hidden_on_admin.png145.9 KB
new eu_cookie_banner_hidden_on_admin_claro.png151.78 KB

Thanks for the quick fix @svenryen

This does now hide the banner on the admin side
Screenshot of the EU Cookie Banner hidden on the admin interface with Claro

When using Gin, there is an extra gap that appears, which might be something Gin is adding.
Screenshot of the EU Cookie Banner hidden on the admin interface with gap on Gin

This fix seems to have introduced a strange bug on the front end where the banner now floats over the toolbar instead of in the padded space in the theme.
Screenshot of EU Cookie Banner above the toolbar

When checking out the main branch, this has the expected position below the toolbar.
Screenshot of EU Cookie Banner in the correct place

svenryen’s picture

svenryen commented
Status: Needs review » Needs work
svenryen’s picture

svenryen commented

I'll make one more attempt, but making the banner consistently render below the toolbar has proven troublesome. If I can't make it render below the toolbar after a few hours, I'm afraid we'll have to use the behavior in this branch (which displays it at the very top with no parts of the banner obscured for all themes I've tried).

It's been troublesome to make the banner appear correctly at the top, and I believe the current behavior is consistent across themes. I understand there's some annoyance when admins see the banner, but you can exclude the banner from being shown for their role. Alternately the banner can be placed at the bottom if admins that use the toolbar need to see the banner and consent to cookies being stored.

When using Claro, Gin, Seven, Olivero and Bartik, I consistently see the banner at the very top of the page, and I'm unable to reproduce the behavior seen in your screenshots.

svenryen’s picture

svenryen commented
Status: Needs work » Needs review

@andybroomfield , I know it's been a while, but I've been busy.

Would you be able to test the patch again, I've done a small rewrite and hope that I caught all edge cases and that the banner now successfully renders below the toolbar on all themes. I tested on Seven, Gin and Claro and it's looking promising so far.

https://git.drupalcode.org/project/eu-cookie-compliance/-/merge_requests...

  • svenryen committed 9b0ea01 on 8.x-1.x 
    Issue #3243001 by andybroomfield, svenryen: Banner at top is not hiding...

  • svenryen committed 219efea on 8.x-1.x 
    Issue #3243001 by svenryen, andybroomfield: Banner at top is not hiding...

svenryen closed merge request !43

svenryen’s picture

svenryen commented
Status: Needs review » Fixed

Something went wrong with the issue branch, so I cherry-picked the relevant commits.

  • svenryen committed cbc62ae on 8.x-1.x 
    Issue #3243001 by svenryen, andybroomfield: Banner at top is not hiding...
andybroomfield’s picture

andybroomfield
they/them
commented

Hi @svenryen

Thanks, sorry for late response.
I've tested this and the fix included in 1.20-beta1 fixes the issue of the cookie banner overlapping the toolbar.
The only minor detail is the z-index of 99999 still pushes it over the banner when sliding in / out or scrolling if the banner is not fixed in place.
I think setting it to 499 should solve that for the out the box css, and I should be able to apply my own custom css to resolve that.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.