I want to have the popup area set to a specific pixel width on computers to only be in an area in the middle, but have a percent width on mobile and tablets so that it will fill the entire screen on them.

Is there a way to enable different modal popup styles for a single modal form? Something where ctools-modal-modal-popup-small can be set for computers and ctools-modal-modal-popup-medium can be set for tablets and mobile phones.

Currently I have the pixel width set so that it fits for a phone. However with this the textfields on the webform do not stay within the modal form on a computer (they are fine on phone and tablet). All the other fields on the form respond to the width of the modal form container. I've tried changing the maxlength in the webform itself but it doesn't change anything. If the responsive problem can't be fixed can you at least help me with this.

Thanks.

Comments

n2itdesigns created an issue.

un1kum’s picture

un1kum CreditAttribution: un1kum commented

I have created the modal window with "ctools-use-modal" class, without adding "ctools-modal-modal-popup-small", or large, or else.
Maybe this solution can help you. I tested it, seems not perfect in landscape layout if you have a big or long webform, however it can be fixed with CSS, using @media (max-width:767px) (or some other @media parameters if you use not bootstrap)

umed91’s picture

umed91 CreditAttribution: umed91 commented

@un1kum did you use Modal_forms?? If yes, where did you define that class?

gaurishankar’s picture

gaurishankar
he/him
Primary language English
Location Delhi
CreditAttribution: gaurishankar commented

Try this one https://gist.github.com/jameswilson/8934896

andyg8’s picture

andyg8 CreditAttribution: andyg8 commented

I believe this patch solves this problem.