CSS only fix - #3395590
Merge request reports
Activity
7 7 position: absolute; 8 8 top: 0; 9 9 left: 0; 10 max-width: 100vw; 
yes with
max-width: calc(100vw - var(--drupal-displace-offset-left, 0) - var(--drupal-displace-offset-right, 0))but seems we don't have any special class when dialog modal or not. seems here js still needed for adding that attribute.
Edited by Ivan Berdinskychanged this line in version 3 of the diff
added 1 commit
- 4debdc85 - Added the modal-dialog class to respective dialog
102 102 } 103 103 adjustedOptions[option] = adjustedValue; 104 104 } 105 if (event.data.settings.modal) { 106 // Adding the modal-dialog class to take displace into account 107 // for width calculation. 108 event.data.$element.parent()[0].classList.add('modal-dialog'); changed this line in version 3 of the diff
added 2 commits
27 28 } 28 29 } 29 30 31 .ui-dialog .modal-dialog { changed this line in version 4 of the diff
added 38 commits
Toggle commit listadded 11 commits
-
d2a3ccf2...67dbfb98 - 4 commits from branch
project:11.x - 21df803f - CSS only fix - #3395590
- 880a30ab - Added the modal-dialog class to respective dialog
- 2cec2eec - Moved the logic to more generic component
- 5ce0815e - Swapped the max-width conditions
- 1b2c3afc - Addressed feedbacks
- 55fc0d6b - Refactored
- 5d758a98 - Added a failing test
Toggle commit list-
d2a3ccf2...67dbfb98 - 4 commits from branch
85 86 $page->pressButton('List additional actions'); 87 $page->findLink('Delete')->click(); 88 $this->assertSession()->waitForElementVisible('css', '[role="dialog"]'); 89 $this->assertSession()->assertWaitOnAjaxRequest(); 90 $script = <<<SCRIPT 91 (function() { 92 return document.querySelector('.modal-dialog').style.width; 93 }()) 94 SCRIPT; 95 96 // Resize the window. 97 $width_before = $this->getSession()->getDriver()->evaluateScript($script); 98 $this->getSession()->resizeWindow(785, 805); 99 $width_after = $this->getSession()->getDriver()->evaluateScript($script); 100 $this->assertEquals($width_before,$width_after); -
Since we are not changing the width of the modal which we were doing in the other MR with the help of js, the width remains constant. I also tested the same by debugging in the test setup but the modal is not adjusting it's width with the screen resize. It would be helpful if someone can help with a step towards the probable solution.
changed this line in version 7 of the diff
-
What do you mean by the width remains constant? Do you mean that the
widthCSS property remains constant or that the modal is not being resized on scroll?Looks like you are trying to assert this using the CSS
widthproperty, but instead you should be asserting what's the actual width of the element using something like theclientWidth: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth.
added 14 commits
-
f91c0487...fe8bed7b - 3 commits from branch
project:11.x - 8da7294a - 1 earlier commit
- 29cec51c - Added the modal-dialog class to respective dialog
- 4e2155ef - Moved the logic to more generic component
- 9da17275 - Swapped the max-width conditions
- 23252b0c - Addressed feedbacks
- 26141422 - Refactored
- 3417aec3 - Added a failing test
- bf7cc35e - Phpcs fixes
- 03806f59 - Added test coverage
- a4058966 - Moved the css logic to more generic file
- 4d5a03b8 - Added a generic dialog css file
Toggle commit list-
f91c0487...fe8bed7b - 3 commits from branch
- core/misc/dialog.css 0 → 100644
1 .ui-dialog { changed this line in version 9 of the diff
added 2 commits
added 30 commits
-
ec1adde4...ca9af3d9 - 11 commits from branch
project:11.x - ca9af3d9...6860e1ad - 9 earlier commits
- 27e6e664 - Moved the css logic to more generic file
- 2cad98d9 - Added a generic dialog css file
- d9da8062 - Refactored the location of newly added css file
- bd5a23d2 - Removed unused modules
- 72024755 - Added overrides for stable9 theme
- a7d87bd7 - Added test for non modal dialog
- 35d79c22 - Attached css to drupal.dialog
- 66dd338b - Restructured oveerrides
- d1e091da - Removed arbitary wait used for debugging
- d706aed2 - Temporary fix for Stable9LibraryOverride
Toggle commit list-
ec1adde4...ca9af3d9 - 11 commits from branch
300 300 css: 301 301 theme: 302 302 css/field_ui_display_mode_table.css: css/field_ui/field_ui_display_mode_table.css 303 core/drupal.dialog: 304 css: 305 component: 306 misc/dialog/dialog.css: css/core/dialog/dialog.css 307 modules/ckeditor5/css/ckeditor5.dialog.fix.css: css/ckeditor5/ckeditor5.dialog.fix.css added 30 commits
-
47b4e2e4...27c6d955 - 7 commits from branch
project:11.x - 27c6d955...6a8e3685 - 13 earlier commits
- c16821df - Added overrides for stable9 theme
- a9330666 - Added test for non modal dialog
- ba15ac61 - Attached css to drupal.dialog
- 046d5e01 - Restructured oveerrides
- 4178e9df - Removed arbitary wait used for debugging
- 8d202488 - Temporary fix for Stable9LibraryOverride
- 6828e03f - Fixed tests
- d2bd7860 - Small nit
- 4255cf1b - Fixed Stable9LibraryOverrideTest
- 22c37fc1 - small nit
Toggle commit list-
47b4e2e4...27c6d955 - 7 commits from branch
