Problem/Motivation

It's impossible to click toolbar tray menu items on really small viewport width (below 16.5em) because toolbar tabs (that have icons) have higher z-index than the tray.

Proposed resolution

Provide higher z-index for unoriented toolbar tray than 502 (it's defined in toobar.icons.theme.css).

Remaining tasks

Patch.

User interface changes

Clickable/tappable tray menu links in unoriented toolbar mode.

API changes

Nothing.

Data model changes

Nothing.

Screenshot before patch

Toolbar tray items before patch

CommentFileSizeAuthor
#12 3037284-claro-theme.png129.71 KBpradipmodh13
#12 3037284-olivero-theme.png133.99 KBpradipmodh13
#12 3037284-12.patch5.65 KBpradipmodh13
#2 toolbar-unclickable_tray_items-3037284-2.patch1.07 KBhuzooka
#2 toolbar-unclickable_items_unoriented-after.png65.56 KBhuzooka
toolbar-unclickable_items_unoriented-before.png61.91 KBhuzooka

Comments

huzooka created an issue. See original summary.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: huzooka » Unassigned
Status: Active » Needs review
StatusFileSize
new toolbar-unclickable_items_unoriented-after.png65.56 KB
new toolbar-unclickable_tray_items-3037284-2.patch1.07 KB

Screenshot after the fix:

Fixed toolbar tray

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Related issues: +#3036975: Multiline Admin Toolbar overlaps with horizontal & vertical menus and Page Title area

Dup of #3036975: Multiline Admin Toolbar overlaps with horizontal & vertical menus and Page Title area

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Status: Needs review » Closed (duplicate)

Closing since #3036975: Multiline Admin Toolbar overlaps with horizontal & vertical menus and Page Title area is a bit older.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Issue tags: -Admin UI Modernisation initiative
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Version: 8.6.x-dev » 8.8.x-dev
Status: Closed (duplicate) » Active

The scope of #3036975: Multiline Admin Toolbar overlaps with horizontal & vertical menus and Page Title area changed, so this isn't a duplicate anymore, and this is still needs to be solved.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

pradipmodh13’s picture

pradipmodh13 commented
Status: Active » Needs review
StatusFileSize
new 3037284-12.patch5.65 KB
new 3037284-olivero-theme.png133.99 KB
new 3037284-claro-theme.png129.71 KB

Hello @huzooka,
I have generated a new patch in accordance with D9 because your patch is in D8 and the ticket is for D9, thus the patch is not applying.
There is a better solution presented for screens less than 16.5 em since if we attempt with z-index, the other options won't be seen.
If we try with z-index then other option will not visible so provided one better solution for below 16.5 em screen
In response to a request, I've included CSS with a specific focus on breakpoints below 16.5 em to achieve narrow viewport design.
Since everything is working fine on above 16.5 em, it is a good idea to limit CSS to max-width: 16.49 em so that it won't conflict with any existing code.
I tried this patch with these admin theme Bartik, Claro, Olivero, Seven, and stark and it working fine as expected.
Note: Also this patch is working fine with with admin toolbar module.
Please review.

For ref attached screenshot.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs tests

Seems like a bug that could benefit from a test case.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Status: Needs work » Postponed

The Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.

Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.