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

CommentFileSizeAuthor
#46 Offcanvas-resize-handlers-claro.mov5.78 MBsheetal.pathak
#42 interdiff_39-42.txt299 bytesakram khan
#42 2928531-42.patch828 bytesakram khan
#39 reroll_diff_33_39.txt4.06 KBsahil.goyal
#39 2928531-39.patch429 bytessahil.goyal
#38 2928531-nr-bot.txt146 bytesneeds-review-queue-bot
#33 interdiff_29-33.txt1.69 KBsagarchauhan
#33 2928531-33.patch3.75 KBsagarchauhan
#29 2928531-29.patch2.06 KBgauravvvv
#27 2928531-27.patch807 bytesdjsagar
#22 resize-handler.JPG113.02 KBhoemmawelt
#20 resize-handler.JPG111.57 KBhoemmawelt
#19 2928531-19.patch802 bytesvisabhishek
#9 2928531_with_patch.png84.76 KBmartijn de wit
#8 2928531_with_patch.png76.06 KBmartijn de wit
#5 2928531-5.patch813 bytesmartijn de wit
#3 2928531.patch883 bytesmartijn de wit
#2 2928531.patch401 bytesmartijn de wit

Comments

Martijn de Wit created an issue. See original summary.

martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
StatusFileSize
new 2928531.patch401 bytes
martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
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
StatusFileSize
new 2928531.patch883 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

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Component: ajax system » Classy theme
StatusFileSize
new 2928531-5.patch813 bytes

new patch for 8.5

martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Issue tags: +Accessibility, +CSS
andrewmacpherson’s picture

andrewmacpherson commented

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

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
StatusFileSize
new 2928531_with_patch.png76.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

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
StatusFileSize
new 2928531_with_patch.png84.76 KB
martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Version: 8.5.x-dev » 8.6.x-dev
martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Related issues: +#2902310: Add bottom padding to off-canvas dialog
martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Related issues: +#2976287: The off-canvas dialog should have a 1px transparent border
martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
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

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Related issues: +#2949991: Add workspace UI in top dialog
andrewmacpherson’s picture

andrewmacpherson commented
Issue tags: +Needs reroll
andrewmacpherson’s picture

andrewmacpherson commented
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

andrewmacpherson commented
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

visabhishek commented
Status: Needs work » Needs review
Issue tags: -Needs reroll
StatusFileSize
new 2928531-19.patch802 bytes

Just re-rolled the patch.

hoemmawelt’s picture

hoemmawelt commented
StatusFileSize
new resize-handler.JPG111.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?

hoemmawelt’s picture

hoemmawelt commented
hoemmawelt’s picture

hoemmawelt commented
StatusFileSize
new resize-handler.JPG113.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

djsagar commented
StatusFileSize
new 2928531-27.patch807 bytes

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

gauravvvv commented
StatusFileSize
new 2928531-29.patch2.06 KB

Patch attached.

gauravvvv’s picture

gauravvvv commented
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

sagarchauhan commented
StatusFileSize
new 2928531-33.patch3.75 KB
new interdiff_29-33.txt1.69 KB

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

sagarchauhan’s picture

sagarchauhan commented
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

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 2928531-nr-bot.txt146 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

sahil.goyal commented
StatusFileSize
new 2928531-39.patch429 bytes
new reroll_diff_33_39.txt4.06 KB

#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

gauravvvv commented

Updated attributions

sahil.goyal’s picture

sahil.goyal commented

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

akram khan’s picture

akram khan
Primary language English
Location Cuttack, Odisha
commented
StatusFileSize
new 2928531-42.patch828 bytes
new interdiff_39-42.txt299 bytes

added updated patch fixed CCF #39 and address #41

akram khan’s picture

akram khan
Primary language English
Location Cuttack, Odisha
commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
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.

sheetal.pathak’s picture

sheetal.pathak commented
StatusFileSize
new Offcanvas-resize-handlers-claro.mov5.78 MB

Hi

As per last comment I have verified this issue in Claro and olivero themes as we don’t have classy theme now in core.
Issue is not reproducing in both themes. Resizing handlers works fine.

Drupal version - 11.x-dev

Themes -Claro , Olivero

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.