Hi

I'm opening a couple of forms in modal window, but I wanted to open it with the size I want (i.e. a very small modal window), but I didn't find how to do this, I've seen that in modal.js file there is this code in the display function (Drupal.CTools.Modal.show)

      $('div.ctools-modal-content', context).css({
        'width': $(window).width() * .8 + 'px',
        'height': $(window).height() * .8 + 'px'
      });
      $('div.ctools-modal-content .modal-content', context).css({
        'width': ($(window).width() * .8 - 25) + 'px',
        'height': ($(window).height() * .8 - 35) + 'px'
      });

Is there any way to override these sizes?

Thanks!

Comments

merlinofchaos’s picture

Status: Active » Closed (works as designed)

Unfortunately currently there is not. At some point I would like to some ability to set this, but for the moment the modal is very fixed. Try dialog.module which I believe will allow you to set that information?

naden’s picture

It's possible without touching ctools modal.js but it's not the best solution. You have to decide on you own if it fit's in your case.

We just overwrite "Drupal.CTools.Modal.show" by making a copy of the function in our modules .js file like this:

Drupal.CTools.Modal.show = function() {
    var resize = function(e) {
      // For reasons I do not understand, when creating the modal the context must be
      // Drupal.CTools.Modal.modal but otherwise the context must be more than that.
      var context = e ? document : Drupal.CTools.Modal.modal;
      $('div.ctools-modal-content', context).css({
        'width': $(window).width() * .8 + 'px',
        'height': $(window).height() * .8 + 'px'
      });
      $('div.ctools-modal-content .modal-content', context).css({
        'width': ($(window).width() * .8 - 25) + 'px',
        'height': ($(window).height() * .8 - 35) + 'px'
      });
    }

    if (!Drupal.CTools.Modal.modal) {
      Drupal.CTools.Modal.modal = $(Drupal.theme('CToolsModalDialog'));
      $(window).bind('resize', resize);
    }

    resize();
    $('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.t('Loading...'));
    var opts = {
      // @todo this should be elsewhere.
      opacity: Drupal.settings.CToolsModal.backDropOpacity,
      background: Drupal.settings.CToolsModal.backDropColor
    };

    Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, opts);
    $('#modalContent .modal-content').html(Drupal.theme('CToolsModalThrobber'));
  };

Now you can toucht the code without hazzle.

merlinofchaos’s picture

The most recent -dev of CTools now has a customizable modal. See #872072: Allow the modal to be more customizable

pcambra’s picture

That's great, thanks Earl

naden’s picture

Thats a good step, but it should be also possible to have "no height" instead of pixel or percent, because if you submit a form via ajax and have to show validation or confirmation messages to the user, the modal dialog does not resize if you set a fixed height!

annazhong’s picture

While I don't think override it is a good way.
if you have reuse the ctools many time.
each time you want a special css,
how could you seperate them by this kind of override?

HAg’s picture

Issue summary: View changes

All in all, it is bad practice to use JavaScript for position and resizing, since both can be done quicker and smoother using css, and because JavaScript usually use another bad practice, in-line style.

HAg’s picture

Status: Closed (works as designed) » Needs review
HAg’s picture

Status: Needs review » Active
HAg’s picture

Category: Support request » Feature request
joelpittet’s picture

Status: Active » Closed (outdated)

Triaging the 6.x issues, it's no longer supported.