[#5573] Modal Terms & Conditions in mobile view

Hello
I have a css problem that I fail to solve.
We use Modal Terms & Conditions field with iframe set and width 100% height 200px.
This works fine in desktop mode, but not on iOS appliances where the full height is used for the iframe (so several pages of conditions in our case). (same thing on safari or chrome)
I failed in finding the cause of this problem.
Could you help me ?
This behavior occurs only on real appliances, not on emulation though.

Thanks for help

To follow I guess that the problem is that both the iframe and the label are enclosed in the field div.
So even setting a fixed height to the div with -webkit-overflow-scrolling:touch; does not work as the clickable label is at the bottom of the scrolled area.

Iframe seemed the best option for mobile as we are also required by EU laws to have the double clic to accept conditions.
Could you change the field so that the iframe is alone in a div and so that there is a first accept and a second one by js also ?

Further on this subject, I also have noticed that using a modal display opens a window with qtip, making it unscrollable on all appliances both desktops and mobiles.

So the only solution left for now is to open the link in a new window which defeats the purpose of this area.

A fix seems to be needed for this special field

Your modal window width and height should be set to be dynamic otherwise you're going to have overflow issues. For example the default below should work fine.

Width: 90%
Height: 90%

There are no plans to make terms and conditions require 2 clicks. Clicking the iframe or div in case of text display does not check the checkbox. If it is on your site then some sort of jQuery maybe present that's causing that behavior.

Hi
You didn't read my posts.
Modal even with two percentages for height and width do not work. They are unscrollable as they are opened as qtips
And iframe definitely do not work on iOS devices due to the fact that the iframe is enclosed in a div WITH the label and the checkbox. So setting the div height makes going down to the iframe compulsory to find the label and the checkbox.
EU Laws requires the double opt in and the double click for conditions. For now there is only single clic for CB terms and conditions

Modal even with two percentages for height and width do not work. They are unscrollable as they are opened as qtips

They're supposed to be qtips. A modal window is just a jQuery driven div floating on top of the body. I've already added a feature ticket to improve the modal usage further to disable the auto centering so the page can scroll freely. See the below ticket.

forge.joomlapolis.com/issues/5566

I do not have an iOS device so whether the improvements will help your situation or not is just a guess. Without screenshots or video showing the issue I've no idea the exact problem you're facing. Is the modal window expanding outside of the mobile devices view and thus can't scroll to see the rest as the modal window re-centers?

due to the fact that the iframe is enclosed in a div WITH the label and the checkbox.

I don't understand the issue. It's a standard checkbox. Clicking the label checks the checkbox. Every checkbox I've ever used has always behaved this way. Clicking the div or the iframe does not check the checkbox, because the div and iframe are not inside the label. Only the words "Accept Terms and Conditions" for example are inside the label for the checkbox and clicking them (if it's not linked) will check the checkbox.

Again, I don't have an iOS device so this all may behave differently specifically for that device.

EU Laws requires the double opt in and the double click for conditions. For now there is only single clic for CB terms and conditions

Then I don't know what to suggest at this time. Having to click a standard checkbox twice is bad UX and makes the user think it's broken or they think it's checked and continue with the form. You may want to consider a different way to display terms and conditions. I'm also not familiar with this double click requirement. If you've some examples or more details about this so we can further investigate it'd be helpful in figuring out a way this could be improved further.

Hello

I really cannot understand how you guys can develop without real iOS devices as they represent nearly 50% of all web traffic as of now.

Emulation DO NOT show the real problems.

1) Iframes on iOS devices are shown not in a window but on full length except if you enclose them specifically in a div. This is not the case for CB terms field. If I set a height for the div#field_id, then the label is enclosed and will appear only after scrolling ALL the iframe length

The solution is to separate the check-box/label from the iframe and enclose each in a separate div.

2) EU law for double opt in to accept terms is valid since a couple of years already. Basically you need to click on the check box to show your acceptation, then it launches a javascript alert window asking you to clic to accept the terms a second time (double opt in) or giving you a second chance to cancel it. (see iTunes terms for instance)

This is compulsory and is really needed on CB and CB Subs

I cannot show you screenshots of iOS devices but my strong advice is to buy at least an iPhone or an iPad as soon as possible. 50% of a market cannot be neglected