Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Whenever you end up with the window smaller than the modal, the modal has a tendency of hiding its top part. Usually the close button is there so it makes the situation rather unclear to the end user.
I suggest using Math.max() so the top of the modal remains always visible.
Comment | File | Size | Author |
---|---|---|---|
#15 | ctools-fix-modal-negative-top-1678562-15.patch | 1.06 KB | adr_p |
Comments
Comment #1
mojzis CreditAttribution: mojzis commentedSimple patch with a fixed value. Could be probably provided as an option in settings.
Comment #2
mojzis CreditAttribution: mojzis commentedComment #3
dooglet CreditAttribution: dooglet commentedI've been working with ctools modal recently to create a user registration form. The form has quite a lot of fields however and I've been running into the problem described above.
Spent a bit of time working on this and come up with a poor solution i'm not particularly proud of but the core of the issue here doesn't seem to be related to the values obtained for the wt variable (which the patch above addresses).
Rather, by looking through the modal.js file and with judicious use of console logging I found that the css values for the top attribute of the div with id modalContent are different before and after the call to Drupal.attachBehaviors();
So, to TL;DR it:
$('#modalContent').css('top') has a normal value (~240px in my case) before the call to Drupal.attachBehaviors() at which point my huge form knocks it to -307px and the top of the form is offscreen at the top of the window. My guess is there's some positional code going on somewhere deeper but I've no idea where. Yet. To the mystery machine!
Comment #4
litzastark CreditAttribution: litzastark commentedJust wanted to note that the code in #3 worked great for me on a D6 site! Thanks for posting, dooglet.
Comment #5
tlilleberg CreditAttribution: tlilleberg commentedIn d7 (possibly others), you can use the fix in #3 without hacking the module itself.
Simply create a js file with these contents: (example file is myModule/js/myModule-modal.js
And attach it in your form array:
You can probably just add the file with ctools_add_js in the callback function itself, though that I haven't tested.
One downside to this is that the code will run on any ajaxRequest, not just the modal form finishing, but I think it's a good trade-off for leaving the ctools code alone.
-- Travis Lilleberg
Digital Loom
www.digital-loom.com
Comment #6
mojzis CreditAttribution: mojzis commented@dooglet, sorry i didn't notice your input sooner ... just a short explanation: the patch doesn't address the wt variable, but the mdcTop variable, which in turn is used later on to set the css top - the same thing you are addressing :) While its elegant to solve the problem without changing the original code, i still have a feeling that my patch does slightly improve ctools :).
Comment #7
DamienMcKennaComment #10
mojzis CreditAttribution: mojzis commentedreroll ;)
Comment #11
mojzis CreditAttribution: mojzis commentedComment #12
mojzis CreditAttribution: mojzis commentedtrigger test ...
Comment #13
AlexKirienko CreditAttribution: AlexKirienko at WikiJob commentedI have experienced same problem with big modals.
In ctools 1.4 I have fixed it with
I have placed fixed Drupal.CTools.Modal.modalContent in my theme JS.
But this is bug. And it will be better for all of us to fix it in ctools.
Thank you for patch, mojzis. But it works only for modals opened when window located at the top of the page. If you scroll page down and open modal - modal will be located at the top of the page, not top of window.
This happens cos you include wt in Math.max. wt - represent window position on page and should be outside of Math.max.
Also I think that big modal windows must be positioned at the top of window. There is no top 20 px needed.
Different themes can have their own top-padding for modal window. For example bootstrap have its own top-padding which will be different in different conditions. We using bootstrap on project and it's critical for us.
Please check fixed patch.
Comment #14
Chris Matthews CreditAttribution: Chris Matthews as a volunteer commentedThe 4 year old patch in #13 to modal.js does not apply to the latest ctools 7.x-1.x-dev and if still applicable needs to be re-rolled.
Comment #15
adr_p CreditAttribution: adr_p commentedRe-roll.
Comment #16
Chris Matthews CreditAttribution: Chris Matthews as a volunteer commentedComment #18
joelpittetThanks the latest fix looks reasonable I've committed it to the 1.x dev branch.
Comment #19
DamienMcKenna