Toolbar height calculation is faulty in multiple cases

Created on 4 April 2018, over 6 years ago
Updated 4 August 2023, over 1 year ago

Problem/Motivation

The admin toolbar applies a padding to the top of the body element that should be equal to its height.

However, with the following scenarios, the height calculation is incorrect.

  1. Settings Tray is enabled and is accessible by the user, the page does not contain any contextual links (?) and the front-end (?) theme uses Bootstrap CSS
  2. The displayed toolbar tabs break into multiple lines.

Proposed resolution

Refactor Drupal.toolbar.ToolbarVisualView.updateToolbarHeight() to fix the height calculation issues.

Remaining tasks

* Test
* Patch
* Get a review

User interface changes

Toolbar does not overlap page content anymore.

API changes

Nothing.

Data model changes

Nothing.

Original report

The admin toolbar applies a padding to the top of the body element that should be equal to its height.

However in the following scenario the height calculation is incorrect.

Settings Tray module adds a tab to the toolbar with a class of hidden. It's the first element inside #toolbar-bar.

Bootstrap css defines hidden as display: none !important;

In ToolbarVisualView.js the updateToolbarHeight method sets toolbarTabOuterHeight by getting the outerHeight of the first .toolbar-tab

Because the first tab is hidden (and crucially, because of bootstrap it has !important), the outerHeight is 0px and thus the body receives a top padding of 0px.

I think the height calculation needs to do something like check the height of tallest tab, not just first one. Or perhaps just ensure the tab it selects to get the height isn't hidden/

Here is an example of calculating the height on an element that is display: none!important.
https://jsfiddle.net/marmite/d9oma2e3/7/

The jQuery documentation for outerHeight says:
The value reported by .outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .outerHeight(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Toolbar 

Last updated about 1 month ago

  • Maintained by
  • 🇫🇷France @nod_
Created by

🇬🇧United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024