Modal dialog dynamic resizing

Right now the only sizing options the modal has are 'fixed' and 'scale to page'. I never figured out how to do scale to content. If someone would like to contribute this feature I'd be interested, but it's not high on my priority list.

There is a resize method and it is called whenever the modal is shown and whenever the window is resized. It shouldn't be too hard to add a third sizing method to that code.

Well, I think you would add code to the resize() function and provide a patch.

  /**
   * AJAX responder command to place HTML within the modal.
   */
  Drupal.CTools.Modal.modal_display = function(ajax, response, status) {
    if ($('#modalContent').length == 0) {
      Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element));
    }
    $('#modal-title').html(response.title);
    $('#modal-content').html(response.output);
    Drupal.attachBehaviors();
  }

A call to resize() should be possible there. It might require changing how resize is defined but this shouldn't be too difficult.

subscribe

subscribe

Hi, I'm trying to do this for quite some time now ... without success. (I'm on drupal 6.x-1.x-dev)

"There is a resize method and it is called whenever the modal is shown and whenever the window is resized. It shouldn't be too hard to add a third sizing method to that code."
=> I did it like that :

if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') {
	var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width;
	var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height;
}
else if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'fixed') { // "fixed"
	var width = Drupal.CTools.Modal.currentSettings.modalSize.width;
	var height = Drupal.CTools.Modal.currentSettings.modalSize.height;
}
else { // custom case for auto resizing ("putting for ex. "auto" in the modal settings
        // Not putting anything here makes the modal resize to the content's size automatically !!??
}

So when I don't put anything, the modal resizes to the modal content's (don't know why...), however the modal is not at the center of the screen : it starts at the middle of the screen. And I can't find how to fix this.

I tried putting in this new "else" :

var context = document;
var width = $('div.ctools-modal-content').width() + 'px';
var height = $('div.ctools-modal-content').height() + 'px';
      $('div.ctools-modal-content', context).css({
        'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',
        'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'
      });
      $('div.ctools-modal-content .modal-content', context).css({
        'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',
        'height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'
      });

but it doesn't change anything : it looks like the document size is not available this soon in the process.

I also tried the solution of a "Drupal.CTools.Modal.resize();" function called in "Drupal.CTools.AJAX.commands.modal_display" function : it is called at each reload of the modal, which is great, but the resize to the modal content doesn't work either...

I guess the solution might comme from "Drupal.CTools.Modal.modalContent" function, but I can't find how to get the document size so the modal positions correctly : when and how could I get it?

This feature (auto resizing to content's size) would be really awesome in ctools modal! Thanks for any tip on this.

@bluffit: did you succed in doing it? I'm really stuck on this...

There is any further progress about this issue?

Thanks,
Sebas.

I'm using 6.x and I had a need to grow the height dynamically based on form content in the modal. In my case it was as simple as modifying the resize function and changing the height CSS to be min-height.

      // Use the additionol pixels for creating the width and height.
      $('div.ctools-modal-content', context).css({
        'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',
        'min-height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'
      });
      $('div.ctools-modal-content .modal-content', context).css({
        'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',
        'min-height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'
      });

Does that work with width as well? If it does we could make it an actual setting.

Yes, works with width - at least for me it does. I don't have a practical use for dynamic width so I didn't modify that bit. But either way, using a fixed width modal it will start out at the correct width specified when using min-height/min-width, and then grow out from there.

One caveat with this, which matters more for width than height - this solution does not move the modal itself. If the modal pops on the screen at the dead center and your content in the modal starts to extend downward, the modal stays in the same place and just gets 'longer'. That's not an issue for me and is the desired effect, but it would be the same with width where the modal won't move but starts extending to the right with new content. A proper fix for width would likely involve keeping the modal stationary and extending out in either direction so it looks nice for the user. I don't think anyone wants a horizontal scrollbar if they can avoid it.

The other thing I did for resizing a multi-step modal with a form was to add a bit of JS like this, which automatically submits the form when an element is checked and then manually resizes the modal to fit the next step. This works very well for me across all browsers IE7/8/9, Firefox, Chrome, Safari, etc. This effectively resizes my modal to a new size for each distinct step of the multi-step process.

  // Upon submit, resize modal
  $('form#my-form-name a.anchor-name').click(function() {
    $('form#my-form-name input#edit-field-name').attr('checked', true);
    $(this).closest('form').submit();
    $('div.mypage-icons').hide();  // These are just stubs that hide the original form element and replace them with images
    $('div.ctools-modal-content').width(628).height(406);
    $('div#modal-content').width(603).height(339);
    modalContentResize();
  });

I am looking for dynamic resizing of the modal too.

Wouldn't it help to completely migrate the modal to jquery modal? I am just curious, haven't really dug into the entire issue.

Also I was checking out couple of website (not built on drupal) that are offering modal as a solution to do basic task like login, signup etc. In addition to dynamic resizing of the modal the transition is also animated and not sudden.

For example, if I have a form embedded inside a modal. I have to keep the size (particularly height) of the modal keeping in mind the errors too. So there is always a white space left for the error. I would ideally should not be showing that white space. and when the error appear, the modal should automatically resize depending on the height. Not only that, the transition should be animated.

There's an issue for that: #1397370: Make modal.js use jQuery dialog.

IMO, there are a few complicating factors involved. Firstly, D6 and its old jQuery library which might require a dependency on jquery_update, and secondly the huge install base of ctools. In the former case it may be that D6 just stays as-is and this is a D7-only choice. In the latter case, it might present problems and bugs for a number of sites. It's more of a code maturity issue and the need for caution when rolling out a large change like that. I'd almost prefer a new ctools 2.x branch for major changes like that, but this is just me and my paranoia in disrupting production sites. I have no meaningful vote anyway :)

I have been able to do most of what you are asking with the existing modal by resizing it upon change in a multi-step process. It's not draggable and I prefer no animations, but it's working quite well across all browsers.

+1 for min-height. do you want a patch for that ?

This patch seems to work on Chrome, Firefox and IE9 for me -- and it includes a dynamic modal in the sample.

(Note: There seems to be some brokenness in the sample wizard I'm going to have to fix separately).

I just tried out this patch, but ran into issues where the modal dialog is higher than the height of the browser window. In such a case the top of the dialog is not visible, as it is above the top of the browser window. Furthermore the modal will not scroll with the rest of the page when using the browser's vertical scroll bar. Tested in Firefox 14, Chrome 20, IE9

@Begun I think that the negative position is a different issue, i tried to adress it : #1678562: Modal may receive negative top css position

For this dynamic patch to be valid there must be some way of addressing the situation of when the modal is larger than the browser window. Either it needs to degrade gracefully (e.g. set the modal height and width to that of the browser window in the event that the modal is bigger), or be able to handle with the larger modal size. I prefer the latter option. I have already started working on it. Will get back with a patch as soon as I can.

But if it's a proble without the patch too I think I agree that it's out of scope for the patch and should be handled independently.

I have created a patch which i believe addresses some usability issues with using a dynamic resizing modal introduced in the patch put forward in #21. The current patch overrides the previous behavior of ctools dynamic modals to remain fixed in one position on the screen while the underlying page is scrolled. This default behaviour doesn't work for oversized modals, as the user will not be able to ever scroll to the bottom of the modal. With this current patch, modals whose height is greater than the browser window will be "pinned" to the underlying page at its current position. That way the modal will scroll with the rest of the page.

I have tested it in FF14, IE9, Chrome 20 and Opera11.6.

To use this patch you must first ensure that you have applied the dynamic modal patch in #21. Sorry I am not sure what the standard protocol is for creating a patch based on another patch. In this case I have kept them separate, rather than merging them.

@merlinofchaos From my testing I beleive that the behavior described here occurs as a result of the patch in #21. So I did not create a new issue.

Here we go with that patch again from #26 .

Sorry guys, I have to submit the patch from #26 one more time, as failed to reset the issue status to 'needs review'. I am guessing that the automated testing will not work if the status is not set as such.

Never intended to fill this list with failed patch attempts. I am not sure what I am doing wrong. Would be grateful if anyone could help me trouble shoot this in a separate issue (here), so that I don't needlessly take up more space here.

I didn't put any work into this –- I just combined the patch in #21 and #29, manually fixed the merge conflicts, and rerolled against HEAD.

This is a very cool patch and I did some testing on it today. Some feedback:

1.) There is an issue when content is redrawn inside an existing modal (i.e. in the case of the panels IPE "Add content" wizard) where the size will grows when you change content (one - http://drupal.org/files/Screen Shot 2012-08-29 at 3.39.00 PM.png, two - http://drupal.org/files/Screen Shot 2012-08-29 at 3.38.04 PM.png, three - http://drupal.org/files/Screen Shot 2012-08-29 at 3.38.10 PM.png).

2.) If you scroll the page during the resized it jumps to the left side (http://drupal.org/files/Screen Shot 2012-08-29 at 3.40.38 PM.png)

@populist:
Could you clarify slightly the first issue. As I understand it, when you adjust content within the modal, the modal size will change. From my understanding this is the correct behavior for a dynamic modal, as it should change to match the content. Could this be an issue with the content itself (e.g. because the internal content is changing size, the modal is adjusting accordingly), in which case you would need to style the content in a way so that it is more fixed dimension wise?

@begun:

The issue I was seeing was caused by cases where there was a multi-step form such as the panels "add content" modal. The problem is that when it loads the first time it does the auto adjustment, but on the second + third loads the size of the modal grows (in my example) by ~120px each time even when the content is the same.

To replicate:

1.) Implement the dynamic modal style for the CTools modals
2.) Use the Panels IPE to "add content" to a panel page
3.) Click on various categories in the "Add content" modal and watch the modal size grow
(note - this needs to be done on a screen large enough to show the increase)

I saw what populist saw too, and I had real trouble figuring out what the heck was causing it.

I tested patch #34 and seems to work fine for me on the various custom CToolsModals I have.

With patch #34 I've got problems with the ajax-register modal style and the background overlay.

1. The modal window change size on scroll
2. The overlay moves with the scroll

I've attach some screen shots if it can help understand the problems

The only solution I've found for now, is to apply the same style (the one that doesn't change size on scroll) to all my modal calls. I've found nothing for the overlay moving problem...

Backported patch #34 for D6, it works for all my ctools modal. Did not test for multi-steps form though.

I tried getting the patch in #34 to work with Modal Forms.

It worked perfectly the first time I trigger a dialog but, contrary to merlineofchaos and populist, the second and subsequent times (without a page reload) resulted in a #modal-content element 1766375px wide and 232355px tall. Substantially bigger than the 660x226px of the element within #modal-content. :-)

@thsutton, i've been using this patch on my production website for months now and it works as expected.

with that said, I've customized the CSS pretty heavily so I might have fixed your bug with some custom CSS.

But overall it works pretty well for me for months.

@j0rd I've just tried #34 on a fresh site under Bartik and it seems to work fine. There must be something in my theme CSS that is tripping the logic up.

Cheers

One thing I've noticed is (and this may be a wider ctools modal issue, not related to this patch), the modal doesn't work very well in mobile browsers.

Currently this issue is leading to very low conversions with mobile traffic as forms (login, register) which are shown via ctools modals are not accessible on mobile. This is causing a 6% vs. 40% conversion rate on mobile vs. desktop.

While I know my site should be redesigned entirely to not use modals (unfortunately I don't have control over these design decisions), it seems that perhaps some tweaks could improve the usability of ctools modal resize with regards to mobile browsers.

The big issue right now, is for mobile, I have the view port zoomed out all the way to the width of my website. When a user opens a modal it shows up in the center of the screen as expected, but if there's a form in that modal and they attempt to type something into it, the viewport zooms in and the keyboard end up taking up space and that causes ctools modal to fall out of the viewport. Since the user can not see what they're typing, they eventually give up. It's quite surprising that even 6% of people manage to fill out these forms (I would never have the patience required).

For a quick solution I will be removing modals for important forms when user is surfing via mobile....but a better fix would be to make sure that it simply just works.

Colorbox for instance (and unfortunately I enjoy this feature in ctools modal, when browsing on desktop) doesn't attempt to keep the modal in the center of your screen. Perhaps this is another proper solution for mobile browsers vs. desktop. Additionally there's an issue where if the user is at the top or far left or right on the page and they open up a modal, they may never know as it's in the center and may be out of their viewport. This could be fixed by centering the users screen on the modal when it's shown.

Anybody else notice similar issues with ctools modal?

The big issue here, is that some mobile browsers call "resize" when you scroll or zoom (i'm looking at you old android browsers, or every mobile safari browser).

In a mobile browser, I suppose you only want to "resize" upon orientation change.

Here's my super hacky patch to make this "semi-work" on mobile devices.

I'm still going to need to disable important modal forms to increase conversions, but at least this allows the user to fill in forms in modal when on mobile, where this previously was nearly impossible.

PS. This patch depends on Modernizr to detect .touch functionality, and thus can never be committed. Patch was provided for proof of concept.

In my previous patch, I forgot to add a commit in which I removed the modalContent from following Y scroll. This is important for mobile as you'll scroll & resize when clicking into an input.

Hi there!

I'm using the patch from #34, and I just found a weird issue:

When there is a sticky header (i.e. when there is a long table, the table header stays at the top when scrolling the page down), this element is been positioned outside the modal. Also, this sticky header is appearing based on the scroll offset of the body, not of the modal.

And there goes the image to this issue:
https://dl.dropboxusercontent.com/u/287795/sandbox/Drupal/Screenshot%20f...

Besides that, the patch if working jus fine form me.

Cheers!

p.s.: my first post to drupal.org! Yeih!

Thanks for saving my time.

The patch from #34 rerolled for the current dev.

+++ b/js/modal.js
@@ -9,6 +9,7 @@
+

@@ -32,7 +33,7 @@
-      animation: 'show',
+      animation: 'fadeIn',

unrelated changes

You are right. This change is removed in the attached patch.

Hi,

This patch seems to works for me.

But I have modifiy the file modal.js to lightly improve the modal size.
I have added these lines in order to better correspond to my need. Hope it could help someone which have same need that me:

in the function setSize, I have added thses lines, in the end of the "if" bloc Drupal.CTools.Modal.currentSettings.modalSize.type == 'dynamic':

$('div.ctools-modal-content', context).css('max-height', (winHeight / 2) * 1.7 + 'px').css('max-width', (winWidth / 2) * 1.5 + 'px').css("overflow", "auto");
$('div.ctools-modal-content .modal-content', context).css("overflow", "visible");

These lines prevents popup to be bigger than the screen (value 1.7 and 1.5 can be adapted)

Thanks and sorry for my bad english

Hi there - not any real work done here but I took the recommendations from sjeandroz and combined them with a patch re-roll. Happy to do some more work on this to help get it through if I knew what the blockers were.

Patch in #54 works but when the modal first loads it is positioned off center. When I scroll then it moves into proper centered position.

I took a quick screen cast to illustrate.. https://www.dropbox.com/s/dctyq28c2xt9ujj/modal-position-issue.mov?dl=0

Any thoughts on how to change the position to be correct when the modal first comes up?

Thanks,
Andy

The patch from #54 is modified to trigger "resize" event after attaching behaviors since behavior code can change the visible content of the window. This can fix the problem of _andy.

Patch #56 do not resolve problem reported by _andy, there is still need to scroll to reposition modal window to center of browser (after something in modal changed)

In my project, $(window).trigger('resize').trigger('resize').trigger('resize'); is required after changing the modal content to place the modal in the proper position. Try this solution. :)

I tested on #56 on Chrome browser on a Droid phone. Here are some issues I found....

The modal is off-center.

The black background does not cover the rest of the screen like it does on a desktop. You can still see most of the rest of the screen.

When registering, clicking on the first password box causes the form to reset and I'm taken back to the top of the form, even though the cursor is active in the password box. The focus should always be on where the cursor is active.

This is ONLY a reroll of #56 so that it applies cleanly to latest dev. I didn't have time to dig in and try to fix the issues reported since then.

The problem with your patch is using unbind() instead of bind(). This breaks existing sites. I fixed this.

The patch applies cleanly but issues as mentioned in comment #59

Could somebody with the phone try to find the source of this problem?

Here's the revised patch which applies to the current dev. Global variables are not created any more in modal.js.

It will be good if this patch include in next release.

The patch is re-rolled.

I just used patch 1294478-67.patch and experienced the same issue when the modal first loads. It loads off center to the right. I dug around and it's being caused by the modal width not being correct when the modalContentResize() initially fires. To get around this I had to use some hacks because of time restraints on my current project, but I want to report my findings and hack here incase someone else has time to resolve the issue in a better fashion.

Outside of the modalContentResize() I added an init variable which I check inside of modalContentResize().

  // Set an init boolean to resize on load after initial setup.
  var modalContentResizeInit = false;
  // Move and resize the modalBackdrop and modalContent on window resize.
  var modalContentResize = function(e) {

At the end of the modalContentResize() function I trigger the resize once again to get all the correct values.

    // This ini check is done because sometimes the correct width values
    // are not set on the initial load of the modal.
    if (!modalContentResizeInit && e.type === 'resize') {
      modalContentResizeInit = true;
      $(window).trigger('resize');
      $(document).on('CToolsDetachBehaviors', function() {
        modalContentResizeInit = false;
      });

    }

Then it gets a little hacky since I had to use some setTimeout() function, but I only do this based on the modalContentResizeInit value. So in both Drupal.CTools.Modal.modal_display and Drupal.CTools.Modal.show I wrapped the tigger function like so:

    // Trigger a resize event to make sure modal is in the right place.
    // If first time through, settimeout to avoid off centered.
    if (!modalContentResizeInit) {
      setTimeout(function() {
        $(window).trigger('resize');
      }, 50);
    }
    else {
      $(window).trigger('resize');
    }

This helped the modal load at the correct size and position without the need to scroll or resize.

Thank you all for the work.

Here is a reworked patch, it solves the initial horizontal placement issue mentioned in #55, #59.
The problem was caused by the 'auto' width styling in combination with the positioning of the 'loading' version of the modal. A reset of the position before setting the width fixes it.

It's based on the patch in #61 with some of the changes by maximpodorov manually applied.
I love cleaner code, but a real cleanup should be a separate issue. The patch is already hard to understand due to its size. Therefor this patch is not based on #67.

Furthermore, the new dynamic modal style assumes too much. Fixed, by replacing the following part.

+++ b/js/modal.js
@@ -186,8 +157,276 @@
+        'max-height': (winHeight / 2) * 1.8 + 'px',
+        'max-width': (winWidth / 2) * 1.8 + 'px',
+        'overflow': 'auto'

The max values can now be manually overridden in the model style definition. It can be a string, integer or a float. When it is a string, the string will be passed as-is to the css property (allowing for: none/auto). In case of an float smaller than zero we assume scaling in relation to the window size and otherwise (int) a fixed amount in pixels.

More:

- On close the scroll event wasn't removed, fixed.
- Updated the documentation.
- Header with title and close button was not sticky anymore: fixed.

Additional modal close fix and remove unnecessary change.

Patch do not work nicely with the last update (dev). Kind of jump on scroll... and doesn't want to close on click...
EDIT: Sorry I had some buggy CSS from previous fight with modal :-)

Sorry for the mess with comments, but still got issues with last dev :
-> modal doesn't close (kind of jump off the bottom of the screen)

I have a problem in the mobile version. My modal window does not have the right dimensions. I made changes to the code to fix the problem.

Patch from #70 does not apply anymore from Version 7.x-1.13 on. I tried a reroll and finally made it, but unfortunately interdiff is no longer apply to create the corresponding interdiff due to all the changes that happened... And as far as I see there is more broken now after ctools updated several things in modal.js.

But for anyone who wants to work on this, here is my rerolled patch (which applies from 7.x-1.13 on again).

+1, also added minimal support to Nodal Forms https://www.drupal.org/project/modal_forms/issues/2997881

Patch #75 didn't work for me. Had to reroll the patch for dev. The newest patch should fix the issue with closing modal, additionally, it makes some assumptions that the close is in the header and that there is a modal header. That has been scaled back to look within the modal content.

Hi, I updated the patch from #77 to be compatible with 7.x-1.19.