The 'Scale' option is almost OK, when speaking of responsive design. E.g. when I set one of the popup styles to scale and width to 0.8 - the popup contact form always fits. The only issue is that I need max-width, so it won't become too wide on wide screens. Such an option would be most beneficial (I tried to do it with CSS but then the modal window loses it's centering).

Any idea? Please help.

Comments

manuel garcia’s picture

manuel garcia commented

I totaly second this request.

Ive also tried making the popup behave nicely in all resolutions, but if you set max-widths in your css file, the js overrides/ignores it with its inline widths.

rp7’s picture

rp7 commented

Has anyone found a (temporary) workaround for this?

alfthecat’s picture

alfthecat commented

Ah, I knew this module had to be too good to be true :(

It's indeed not suitable for mobile without stripping all elegance on desktops. Hope this can be implemented one day. I've tried every single modal/popup solution out there over the past few years but it seems to be one of those things Drupal just can't really do.

gausarts’s picture

gausarts commented
Issue summary: View changes

but if you set max-widths in your css file, the js overrides/ignores it with its inline widths.

Just in case useful to anyone else:
You may want to add ugly !important declaration, or use max-width to stop inline JS styles from setting rigid width. Otherwise the JS route is another option.

@media (max-width: 600px) { 
  #modalContent {
    left: 0 !important;
    max-width: 100%;
    /* Other overrides for top, etc */
  }
   .ctools-modal-content {
     max-width: 100%;
   }
}
danithaca’s picture

danithaca commented
Related issues: +#1914134: Additional activation options for mobile devices
Leagnus’s picture

Leagnus commented

#4 helps much. Thank You.

rahuldolas123’s picture

rahuldolas123 commented

#4 worked for me too. Thanks!

manuel garcia’s picture

manuel garcia commented
Project: Modal forms (with ctools) » Ctools
Version: 7.x-1.x-dev »
Related issues: +#1294478: Modal dialog dynamic resizing, +#1397370: Make modal.js use jQuery dialog

I'm thinking this should be fixed on ctools itself, since its there where the inline width is being set (js/modal.js).

There are two opened issues with patches that might be useful to contribute to, so adding them as related.

Feel free to close this as duplicate if necessary. For now I'm leaving it opened for visibility.

jkdev’s picture

jkdev commented

Quick fix for Bootstrap theme

Since this post has high rank at google, Please find attached quick fix for responsive ctools modal.
We used the defaults at modal.js

modalSize: {
        type: 'scale',
        width: .8,
        height: .8,
...

The problem for us was that ctools modal took 80 precent of the viewport always. This is fine under mobile, but in desktop - it looked huge.

We have added the folowing CSS to override this problematic huge width.

@media (min-width: 600px) { 
  #modalContent {
    left: 50% !important;
    max-width: 600px !important;
    transform: translateX(-50%);
/* Do not forget to add webkit/moz/o/ms prefixes for CSS3 props */
  }
  .modal-dialog {
    max-width: 600px !important;
  }
}