Discovered by @lauriii while reviewing #3259929: Olivero: Refactor dropbutton CSS to make use of modern CSS.

If a dropbutton is placed near the bottom of the content area and then opened, Olivero's footer will cover the bottom of the dropdown.

To reproduce

  1. Set Olivero as an admin theme (note this isn't supported, but its the easiest way to reproduce)
  2. Visit /admin/structure/taxonomy and open the bottom-most dropbutton

CommentFileSizeAuthor
#11 After patch TD.png93.87 KBAamir M
#11 Before patch TD.png82.45 KBAamir M
#7 3302052-Olivero-footer-can-obscure-bottom-of-dropbutton-dropdown-7.patch917 bytesSakthivel M
#5 After patch BD.png88.16 KBAamir M
#5 Before patch BD.png84.78 KBAamir M
#3 3302052-Olivero-footer-can-obscure-bottom-of-dropbutton-dropdown-3.patch821 bytesSakthivel M
#2 Cursor_and_Taxonomy___Olivero.png59.09 KBmherchel
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel commented
Issue summary: View changes
FileSize
Cursor_and_Taxonomy___Olivero.png59.09 KB
Sakthivel M’s picture

Sakthivel M CreditAttribution: Sakthivel M at QED42 for Drupal India Association commented
Status: Active » Needs review
FileSize
3302052-Olivero-footer-can-obscure-bottom-of-dropbutton-dropdown-3.patch821 bytes

#3 Please review the patch

Aamir M’s picture

Aamir M CreditAttribution: Aamir M at QED42 for Drupal India Association commented
Assigned: Unassigned » Aamir M
Aamir M’s picture

Aamir M CreditAttribution: Aamir M at QED42 for Drupal India Association commented
Assigned: Aamir M » Unassigned
Status: Needs review » Reviewed & tested by the community
FileSize
Before patch BD.png84.78 KB
After patch BD.png88.16 KB

Verified and tested patch #3 on Drupal 9.5.x-dev. Patch applied successfully and looks good to me.

Testing steps:
1. Goto admin/Appearance
2. Set Olivero theme in the Administration theme (Scroll down and see)
3. Save configuration
4. Go to Structure>Taxonomy
5. Clock on drop down in front of Tags
6. Observe bottom of the dropdown is obscure
7. Apply the patch
8. Reload the page. (Note: Clear all caches if required)
9. Now observe the bottom of the dropdown is clearly visible

Testing Result:
1. After applying the patch the bottom of the dropdown is clearly visible

Can be moved to RTBC

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel commented
Status: Reviewed & tested by the community » Needs review

Thanks for the patch and review! It looks (almost) perfect, with one minor nitpick:

Can you add a comment after the z-index change? Something like /* Ensure dropdown is not cut off by footer. */

This will make sure we properly test this in the future if there are any changes 😀

Sakthivel M’s picture

Sakthivel M CreditAttribution: Sakthivel M at QED42 for Drupal India Association commented
FileSize
3302052-Olivero-footer-can-obscure-bottom-of-dropbutton-dropdown-7.patch917 bytes

@mherchel thank you for the suggestions, #7 Please verify the patch

amin.ankit’s picture

amin.ankit
Primary language English
Location Gujarat (Vadodara)
CreditAttribution: amin.ankit at QED42 commented
Assigned: Unassigned » amin.ankit
amin.ankit’s picture

amin.ankit
Primary language English
Location Gujarat (Vadodara)
CreditAttribution: amin.ankit at QED42 commented
Assigned: amin.ankit » Unassigned
Aamir M’s picture

Aamir M CreditAttribution: Aamir M at QED42 for Drupal India Association commented
Assigned: Unassigned » Aamir M
Aamir M’s picture

Aamir M CreditAttribution: Aamir M at QED42 for Drupal India Association commented
Assigned: Aamir M » Unassigned
Status: Needs review » Reviewed & tested by the community
FileSize
Before patch TD.png82.45 KB
After patch TD.png93.87 KB

Verified and tested patch #7 on Drupal 9.5.x-dev. Patch applied successfully and looks good to me.

As per @mherchel's previous comment the /* Ensure dropdown is not cut off by footer. */ also added after z-index

Testing Result:
1. After applying the patch the bottom of the dropdown is clearly visible

Screenshots are attached for the reference
Hence moved to RTBC

  • lauriii committed b78d6dc on 10.1.x 
    Issue #3302052 by Sakthivel M, Aamir M, mherchel: Olivero footer can...

  • lauriii committed 8676957 on 10.0.x 
    Issue #3302052 by Sakthivel M, Aamir M, mherchel: Olivero footer can...

  • lauriii committed 61e632d on 9.5.x 
    Issue #3302052 by Sakthivel M, Aamir M, mherchel: Olivero footer can...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Reviewed & tested by the community » Fixed

Committed b78d6dc and pushed to 10.1.x. Also cherry-picked to 10.0.x and 9.5.x. Thanks!

Status: Fixed » Closed (fixed)

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

masipila’s picture

masipila CreditAttribution: masipila as a volunteer commented

The way we force .layout-main-wrapper to have higher z-index than .site-footer causes problems for modal dialogs placed in the footer. I opened a new issue to figure out a solution for this, see #3368930: z-index of .layout-main-wrapper causes problems with Cookies modal dialog placed inside .site-footer.

The purpose of this comment here is NOT to re-open this old issue which has already been committed, but to catch the attention of the community members that contributed here so that you can chime in to #3368930.

Cheers,
Markus