Long page titles in the overlay make the overlay-content too wide, causing a horizontal scroll bar. The attached patch fixes the issue by allowing the title to wrap onto multiple lines, pushing the overlay-title down the page.

See the attached before and after screenshots.

The screenshots are from Google Chrome. The bug occurs in Google Chrome and I expect also exists in all other compliant browsers. The patch has been tested in Chrom only, but should fix the issue in all compliant browsers. Other browsers need further testing.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bevan’s picture

The bug was introduced in #668640: Overlay shouldn't be based on jQuery UI Dialog or in the code it was refactoring.

Related; #724562: Overlay title gets covered up by tabs.

Bevan’s picture

FileSize
564 bytes
2.44 KB

The attached CSS file is a shim to fix the issue without needing to modify core, by extending & overriding overlay module's CSS styles. Add it to a custom module or theme.

The attached zip file is a micro-module that adds the CSS shim file to all pages. It includes the CSS shim file. It is not tested. Install it as per usual.

Status: Needs review » Needs work

The last submitted patch, overlay-title-wrap.patch, failed testing.

Bevan’s picture

Status: Needs work » Needs review

overlay-title-wrap.patch queued for re-testing.

AaronBauman’s picture

Version: 7.0 » 7.x-dev

This issue persists.

Bevan’s picture

overlay-title-wrap.patch queued for re-testing.

digitgopher’s picture

Issue summary: View changes
Status: Needs review » Needs work

Thanks, this works for me on initial page load. However, as soon as you resize the browser it reverts to the previous behavior. Is there a quick fix?