Problem/Motivation

Discovered an issue in Claro (in Drupal 9.1) when you try to resize a dialog.
The dialog would disappear.
I also tested this on 8.9.10 and there the problem seems not to exist.

Claro Token dialog

Steps to reproduce

  1. Go to admin/structure/block/manage/claro_page_title
  2. Click on "Browse available tokens."
  3. Try to resize dialog

Note: When I override 

core/drupal.dialog:
   - claro/claro.drupal.dialog

with 

core/drupal.dialog:
    - seven/seven.drupal.dialog

the problem is solved. So needs to happen somewhere in the claro.drupal.dialog

Proposed resolution

Fix dialog resizing in Claro

Remaining tasks

Find & fix bug

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#15 dialouge_resize.mp41.6 MBvikashsoni
#13 3186463_after_multiple_modal issue_13.gif4.12 MBhinal05
#13 3186463_before_multiple_modal issue_13.gif3.06 MBhinal05
#13 3186463_after_13.gif3.02 MBhinal05
#13 3186463_before_13.gif1.26 MBhinal05
#12 3186463-after.gif8.05 MBabhijith s
#12 3186463-before.gif8.27 MBabhijith s
#10 3186463-10.patch790 bytesgauravvvv
#5 claro_dialog_absolute.gif6.97 MBcodewithlakshay
claro_token_dialog.png198.89 KBsaschaeggi

Comments

saschaeggi created an issue. See original summary.

antoniya’s picture

antoniya CreditAttribution: antoniya commented

@saschaeggi I just noticed this today while adding some Metatag defaults! I can also confirm that it's not present when using Seven so it must be a Claro specific issue.

BTW if you scroll down you'll notice that the tokens dialog gets pinned at the very bottom of the page. It took me a minute to notice this.. I had already opened it a bunch of times and tried to resize it every time. When I finally scrolled down I had like 17353685629 modals at the bottom of the page. 😄

antoniya’s picture

antoniya CreditAttribution: antoniya commented

This seems to be a positioning issue: it goes away if I add position: absolute; to .ui-dialog in claro/css/components/dialog.css. I think this is a side effect that was introduced by this commit?

batkor’s picture

batkor
Location Irkutsk
CreditAttribution: batkor commented

I can also confirm

codewithlakshay’s picture

codewithlakshay CreditAttribution: codewithlakshay at Material for Drupal India Association commented
StatusFileSize
new claro_dialog_absolute.gif6.97 MB

Yes, that's an issue caused due to incorrect position, tried to add position: absolute; as suggested by #3 and it works pretty well.

santosh_verma’s picture

santosh_verma CreditAttribution: santosh_verma at Material for Drupal India Association commented
Assigned: Unassigned » santosh_verma
nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ as a volunteer and at Smile commented
Issue tags: +JavaScript
santosh_verma’s picture

santosh_verma CreditAttribution: santosh_verma at Material for Drupal India Association commented
Assigned: santosh_verma » Unassigned
santosh_verma’s picture

santosh_verma CreditAttribution: santosh_verma at Material for Drupal India Association commented

Yes @nod_ this is a JS issue, The position from let and top are miss calculated from js just need to figure out this and also need to change position absolute to fixed or it also can we achievable with CSS ( position: fixed; left: 50%; top:50%; transform: translate(-50%, -50%); )

gauravvvv’s picture

gauravvvv CreditAttribution: gauravvvv commented
StatusFileSize
new 3186463-10.patch790 bytes

I have provided a patch as per the solution suggested in #3, Please review if it is working or not.

gauravvvv’s picture

gauravvvv CreditAttribution: gauravvvv commented
Status: Active » Needs review
abhijith s’s picture

abhijith s CreditAttribution: abhijith s as a volunteer and at Zyxware Technologies commented
StatusFileSize
new 3186463-before.gif8.27 MB
new 3186463-after.gif8.05 MB

Applied patch #10 and it works fine.Adding the screenshots below.

Before patch:

before

After patch:

after

RTBC +1

hinal05’s picture

hinal05 CreditAttribution: hinal05 as a volunteer and at QED42 for Drupal India Association commented
StatusFileSize
new 3186463_before_13.gif1.26 MB
new 3186463_after_13.gif3.02 MB
new 3186463_before_multiple_modal issue_13.gif3.06 MB
new 3186463_after_multiple_modal issue_13.gif4.12 MB

Applied patch #10 and it's working fine for modal resize issue. At a time of testing I have found one more issue like multiple token modal issue. Please review the screenshots.

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

Drupal 9.1.10 (June 4, 2021) and Drupal 9.2.10 (November 24, 2021) were the last bugfix releases of those minor version series. Drupal 9 bug reports should be targeted for the 9.3.x-dev branch from now on, and new development or disruptive changes should 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.

vikashsoni’s picture

vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented
StatusFileSize
new dialouge_resize.mp41.6 MB

Applied #10 patch applied successfully
Thanks for the patch
for ref sharing video ....

gauravvvv’s picture

gauravvvv CreditAttribution: gauravvvv at Material for Drupal India Association commented
hmendes’s picture

hmendes CreditAttribution: hmendes at CI&T commented
Version: 9.3.x-dev » 9.4.x-dev
Status: Needs review » Reviewed & tested by the community

I tested the patch from #10 and it fixed the problem for me. I'll not send videos as they would be the same as the previous comments.
I can also confirm that the problem reported by #13 was fixed.
Changing this to RTBC.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Reviewed & tested by the community » Closed (duplicate)

Closing this in favor of #3191527: Dialog width and positioning issues in Claro. Crediting folks on this issue there.

antoniya’s picture

antoniya CreditAttribution: antoniya commented

So it really was #3023311: Modal dialog style update that introduced this regression then? Thanks for fixing it! 🙌