Problem/Motivation

This is a follow-up issue to #3531516: Admin toolbar height is not 100% since upgrading to Drupal 11.2. The following selector breaks off-canvas on the right because the div container there still has data-offset-top="0":

#drupal-off-canvas-wrapper {
  [data-admin-toolbar] &:is([data-offset-top], [data-offset-bottom]) {
    left: var(--drupal-displace-offset-left, 0) !important;
    width: calc(100% - var(--drupal-displace-offset-left, 0px)) !important;

    &:dir(rtl) {
      right: var(--drupal-displace-offset-right, 0) !important;
      width: calc(100% - var(--drupal-displace-offset-right, 0px)) !important;
    }
  }
}

Steps to reproduce

Proposed resolution

Do we have to add &:not:is([data-offset-right]) ?

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#2 Cursor_and_Notification_Center.png557.14 KBmherchel

Issue fork drupal-3562009

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

jurgenhaas created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
StatusFileSize
new Cursor_and_Notification_Center.png557.14 KB

Adding image. I can fix this in CSS, but no clue why it has data-offset-top="0"

mherchel opened merge request !14058

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

That's a great question, I don't know the answer, though. ECA is using the same off-canvas and also comes with that attribute.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review

Fixed with CSS.

The proper fix would probably to go to whatever's injecting the data-offset-top, but there's no way to know if it's just Layout Builder, or if there are also contrib modules out there that might have copied LB's implementation.

So, fixed with CSS.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Needs review » Reviewed & tested by the community

Tested with ECA and it works as expected.

nod_ closed merge request !14058

  • nod_ committed 4167c87c on 11.3.x 
    fix: #3562009 Off canvas on the right is now always full-width

By:...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 11.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 42d82bf6192 to 11.x and 4167c87cde7 to 11.3.x. Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • nod_ committed 42d82bf6 on 11.x 
    fix: #3562009 Off canvas on the right is now always full-width

By:...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 11.3.x-dev
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

nod_’s picture

nod_
Primary language French
Location Lille
commented

Agreeing with #5, a css-only patch caused the bug, a css-only patch should fix it to make sure we don't create a regression for contrib

Status: Fixed » Closed (fixed)

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