Problem/Motivation

Using a custom dialog or using the system tray module and having Classy as base theme.
Having a modal opened and one of the options is set to resizable, the resize handlers are not accessible with a mouse.

Proposed resolution

The padding provide at .ui-dialog {} in dialog.css is overriding the padding provided in dialog.css by jQuery UI.
Setting the padding back to padding: .2em; or removing the padding override will enable the access to the handlers again.

Remaining tasks

Reviewing the patch

User interface changes

The handlers are accessible again with the mouse cursor.

API changes

none

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Martijn de Wit created an issue. See original summary.

Martijn de Wit’s picture

FileSize
401 bytes
Martijn de Wit’s picture

Title: Dialog resize handlers are broken by dialog.css in Classy theme » Dialog resize handlers are broken by dialog.css in Classy theme and System tray module
Component: Classy theme » ajax system
FileSize
883 bytes

It seems that not only dialog.css is setting the padding to zero, also the system tray theme css is setting the padding back to zero.

Updated the patch to remove the padding:0; in dialog.css and off-canvas.theme.css.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

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

Martijn de Wit’s picture

Component: ajax system » Classy theme
FileSize
813 bytes

new patch for 8.5

Martijn de Wit’s picture

Issue tags: +Accessibility, +CSS
andrewmacpherson’s picture

Thanks for tagging this as an acccessibility issue, I wasn't aware it had been filed.

Can you post screenshots of the difference that the patch makes?

Martijn de Wit’s picture

FileSize
76.06 KB

Maybe this is more a usability issue than an accessibility issue, not sure...
Here is a screenshot with the patch applied. As you can see the handler for resizing is now available. With out the patch the resize option is not accessible with the cursor and the whole resize feature can not be used. In code it is enabled.
System tray without the right cursor that makes resizing available
System tray with the right cursor that makes resizing available

Martijn de Wit’s picture

FileSize
84.76 KB
Martijn de Wit’s picture

Version: 8.5.x-dev » 8.6.x-dev
Martijn de Wit’s picture

Martijn de Wit’s picture

Martijn de Wit’s picture

Title: Dialog resize handlers are broken by dialog.css in Classy theme and System tray module » Off-canvas resize handlers are broken by dialog.css in Classy theme and System tray module
Martijn de Wit’s picture

andrewmacpherson’s picture

Issue tags: +Needs reroll
andrewmacpherson’s picture

Component: Classy theme » CSS

Needs a re-roll because the off-canvas.theme.css moved from the settings tray module to core/misc/dialog/

The patch in #5 is changing the style of off-canvas dialogs in the module CSS, but it's changing the style of ALL dialogs in the Classy theme. That doesn't sound intentional. Note: the Classy theme doesn't yet have any custom styling for the off-canvas dialog, so perhaps we should add an off-canvas.css to Classy?

andrewmacpherson’s picture

Status: Needs review » Needs work

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

visabhishek’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
802 bytes

Just re-rolled the patch.

gnuschichten’s picture

FileSize
111.57 KB

I'm a bit confused.

For me, the Ui-Resizable-W handler is accessible, but only in the "ui-dialog-titlebar". There is a simple reason for that. The ui-front element has a z-index with the value "100". The Ui-size thumb has a z-index of „90“. Increasing the value to „100“ (in reziable-min.js) allows the handler to be accessed on the entire off-canvas element .

But maybe I misunderstand the issue?

gnuschichten’s picture

gnuschichten’s picture

FileSize
113.02 KB

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

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

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

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). 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.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now 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: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

djsagar’s picture

Just re-rolled the patch for 9.2.x-dev.

Please review,

Thanks!

Status: Needs review » Needs work

The last submitted patch, 27: 2928531-27.patch, failed testing. View results

Gauravvvv’s picture

Patch attached.

Gauravvvv’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 29: 2928531-29.patch, failed testing. View results

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

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

sagarchauhan’s picture

Added patch to address failed test and also remove padding from Claro theme similar to others.

sagarchauhan’s picture

Status: Needs work » Needs review

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

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.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.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now 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.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now 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.

needs-review-queue-bot’s picture

Status: Needs review » Needs work
FileSize
146 bytes

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

sahil.goyal’s picture

#33 is not longer applies to the current version 10.1.x as such theme are no longer been available with the D10 rather than the claro with having dialog in. So reroll the patch and attaching reroll_diff.

Gauravvvv’s picture

Updated attributions

sahil.goyal’s picture

Need to built css, facing some issue with yarn, please built css using yarn and update it, Thanx.

Akram Khan’s picture

added updated patch fixed CCF #39 and address #41

Akram Khan’s picture

Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative, +Needs issue summary update, +Needs screenshots

The issue summary should be updated as this mentions when classy was a base theme, but since classy has been removed from core how is it triggered now? Is this verified an issue in claro?

With a UI issue before/after screenshots will be needed.

Version: 10.1.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, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.