"Ask about product" fancybox not working properly on mobile

[Viktoras9]

Hey, I have problem with fancybox on "ask about product".
That fancybox seems to react to screen height and when I go to product via mobile phone it shows me only top corner of real window (all site template is responsive). So I can put only my email and usename, but fancybox window don't let me to put question and send it. When I try this function on PC with zoom (imitating responsive screen) problem remains, bus there is scrolling option in fancybox window, so there I can put necessary info.
When I use not responsive template fancybox working properly with scrolling. So where exactly is problem and how to fix it?

Joomla 2.5
Virtuemart  2.6.6

[jenkinhill]

Nobody is going to be able to help unless you post the site URL!

You do not give exact J! version, but your VM version is well out of date and insecure. Latest version in the VM2 series is 2.6.22  See http://forum.virtuemart.net/index.php?topic=118683.0

[Viktoras9]

Sorry, new to forum communications.

Solved problem by turning off fancybox. Not perfect solution, but fits to me. Thanks for information

[Studio 42]

Fancy box and facebox, do not work properly in mobile and Joomla modal have same problem. Theyre are not responsive.
So you need to add your own Javascript to resize it or change to a better modal box.
Using Native Bootstrap modal, is responsive for eg.

[Uglystick]

Hi, I am having the same issue, and would like to know if there is a fix.

On IOS devices, if a customer click on the "ask question" (renamed "Click to Try On" on my site) the Fancy Box opens, but you cannot scroll down to the send request button.
My site URL - www.ebonyboutique.co.nz

Is there a way to stop the body of the page from scrolling and allowing the fancy box to scroll?

BTW I am still learning, so anything too involved may be over my head!

Virtuemart 3.0.16
Joomla 3.5.1

[Studio 42]

Please, read my message before.
Facebox and fancy box is not full responsive, this 2 javascripts are obselete, so you need too use another modal, because all 2 are not maintained anymore.
I personally changed to use Bootstrap Modal in some of my sites and this solution work, but of course this need some javascript/Css/php changes and that your template use Bootstrap.

[innato]

I found a fix that works for me.
J3.5.1
VM3.0.16

In the file jquery.fancybox-1.3.4.css that comes with VM3 (/components/com_virtuemart/assets/css), the settings for #fancybox-content include the line "overflow: hidden;" (somewhere around line 81).
If you change that single line into "overflow: auto;" you're done!

Of course, you don't want to hack the core, therefore you can create an override:
- Create a new file called "vm_fancybox.css" or any other name that makes it unique.
- Put the following css code in this new file:

#fancybox-content {
   overflow: auto;
}

- Upload the file into the folder /templates/YOUR_TEMPLATE/css/

If it still doesn't work, try to add "!important" to force it.
The code should then be:

#fancybox-content {
   overflow: auto !important;
}