Toolbar Anti-flicker adds height=400px on Boostrap theme causing a very large spacing at top of page

Created on 4 August 2016, over 8 years ago
Updated 17 January 2025, 3 months ago

Toolbar Anti-flicker seems to be conflicting with Bootstrap 8.x-3.0-rc2 theme ( https://www.drupal.org/project/bootstrap ).

Bootstrap appends style="top-padding:80px" to the <body> tag but when Toolbar Anti-flicker is enabled, the style bootstrap adds to body tag disappears and Toolbar Anti-flicker appends style="height:400px" to <div id="toolbar-administration">. This obviously causes a large gap between the admin toolbar and the page.

As an example, this is what Toolbar Anti-flicker adds style="height: 400px;":

<div id="toolbar-administration" class="toolbar toolbar-oriented" aria-label="Site administration toolbar" role="group" style="height: 400px;">

Whereas on other theme as such Bartik, Toolbar Anti-flicker adds height="80px", not height="400px". And this is fine.

I'm not entirely sure if this is a bootstrap issue or Toolbar Anti-flicker?

🐛 Bug report
Status

Fixed

Version

2.2

Component

Code

Created by

🇬🇧United Kingdom onejam

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

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

  • 🇨🇦Canada OMD

    I've just updated to Drupal 10.4.1 and I'm seeing this issue. On front-end pages the toolbar is creating padding:

    .toolbar-anti-flicker.toolbar-loading.toolbar-fixed.toolbar-horizontal.toolbar-tray-open body {
    padding-top: 4.91331rem;
    }

    ...making a huge white space above my toolbar. The CSS originates in toolbar.module.css from https://www.omnivex.com/core/themes/claro/css/components/toolbar.module.css. I'm certainly not using Claro on my front-end so I don't get why this is appearing only here. To make it more bizarre on the admin back-end pages where Claro is used the spacing is normal again.

Production build 0.71.5 2024