Problem/Motivation

Many adaptive websites rely on javascript code which listens on the window resize event to align content correctly. When the toolbar is shown or hidden, these events are not triggered and parts of the page may break.

I marked this ticket as major bug since this can cause confusion for editors and non-tech users. It might also result in false bug reports.

Proposed resolution

Trigger the resize event on the window object.

$(window).trigger('resize');

Remaining tasks

  • Create patch
  • Discuss if we might add other events like scroll

User interface changes

Adaptive websites will look way better when using the toolbar tray.

API changes

None

Data model changes

None

CommentFileSizeAuthor
#4 trigger_resize_event_on-2566927-4.patch1.45 KBaxe312

Comments

axe312 created an issue. See original summary.

axe312’s picture

axe312 commented
Project: Admin Toolbar » Drupal core
Version: 8.x-1.x-dev » 8.0.x-dev
Component: Code » ajax system
axe312’s picture

axe312 commented
Component: ajax system » toolbar.module
axe312’s picture

axe312 commented
Status: Active » Needs review
StatusFileSize
new trigger_resize_event_on-2566927-4.patch1.45 KB
nod_’s picture

nod_
Primary language French
Location Lille
commented
Category: Bug report » Support request
Priority: Major » Normal
Status: Needs review » Fixed

The window is not resizing when interacting with the toolbar, we wouldn't want to be liars.

We do have a way to let code react to toolbar messing around: that's why we have the drupalViewportOffsetChange event firing on document. We have that exact use case in core. Open Views UI, open a modal and play with the toolbar. It uses the event above to do it's magic, see dialog.position.js.

axe312’s picture

axe312 commented
Status: Fixed » Active

Friday evening madness. Sorry, forgot to implement the script. It works!

This might be useful for somebody else, here is how I fixed the issue by using the drupalViewportOffsetChange event:

(function ($, Drupal, window) {
  'use strict';

  // Trigger window resize when viewport changes through toolbar.
  Drupal.behaviors.responsiveFixes = {
    attach: function (context, settings) {
      $(window)
        .once('responsiveFixes')
        .on('drupalViewportOffsetChange', function () {
          $(window).trigger('resize');
        });
    }
  };
}(jQuery, Drupal, window));
axe312’s picture

axe312 commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

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