[#5573] Modal Terms & Conditions in mobile view

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.

The label and the iframe are already separate. The iframe is not inside the label. However you're setting the height incorrectly causing an overflow issue, which is why you're seeing strange behavior. Do not set a height on "div#field_id" use the "Height" parameter in the Terms & Conditions field under Parameters > Display to set a height on the iframe only.



There could even be some other styling present on your site causing this. Have you tried with default protostar template to see if issue persists?

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)

Can you please provide proof of this law and some examples that I can review. All I can find in regards to double opt-in is regarding newsletters for spam protection, but nothing in regards to accepting terms. Regardless am very interested in your findings so we can work towards fixing this.

The label and the iframe are already separate.

No Kyle, they are part of the same div. And the only way to have a correct iframe behavior in iOS is to enclose the iframe in a div with a fixed height.
In CB case, once again, this is not possible because the field div enclose BOTH the iframe and the label, so the label will be hidden and only shown at the end of the iframe on iOS if we set an height for the div.
And if we dont set an height then the iframe is disclosed in full length (4pages) on real iOS devices.
This is a know problem occurring both on iOS safari and chrome and the only solution is this div enclosure. Google a few on the net and you'll find it easily. It does not occur on emulators, only on real devices.

As for EU laws, as soon as your conditions mention user data and email, you have to have this double clic setting. This is why ALL big websites use them.
If you need the law, I can retrieve it but honestly this is really usual stuff....

The height parameter sets a height directly on the iframe. You're setting a height on the field row. Since the iframe has a static height set on it you're probably going to have overflow problems. For example if the div has 100px height and the iframe has 200px height you'll have overflow and things won't behave properly. You need to remove the height being applied to the div via CSS and set the height only on the iframe. The checkbox is then below the iframe properly.

One option could also be to have your terms and conditions as a language string then use the Text usage and specify the terms and conditions as your language string. Next you can add overflow CSS to the container div to have it scrollable. This avoids having to use an iframe entirely and maybe fit your needs better.

As for EU laws, as soon as your conditions mention user data and email, you have to have this double clic setting. This is why ALL big websites use them.
If you need the law, I can retrieve it but honestly this is really usual stuff....

Again, I can't find any information confirming this. Facebook doesn't even have double opt-in and simply has "By clicking Sign Up, you agree to our Terms and that you have read our Data Policy, including our Cookie Use.". So with that Facebook isn't even EU compliant. Google is also a simple 1 checkbox without a double click. Yes, providing further information would be of great help. No, this is not usual stuff; I'm in the US and I have no idea what your country by country laws are and how they apply to the web.

The height parameter sets a height directly on the iframe. You're setting a height on the field row. Since the iframe has a static height set on it you're probably going to have overflow problems. For example if the div has 100px height and the iframe has 200px height you'll have overflow and things won't behave properly. You need to remove the height being applied to the div via CSS and set the height only on the iframe. The checkbox is then below the iframe properly.

No ! this is a must for iOS devices, please google it to check that iframe MUST be within a div with height set to be displayed properly on iOS
For instance :
duckduckgo.com/?q=iframe+height+problem+on+ios&t=osx
stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari

One option could also be to have your terms and conditions as a language string then use the Text usage and specify the terms and conditions as your language string. Next you can add overflow CSS to the container div to have it scrollable. This avoids having to use an iframe entirely and maybe fit your needs better.

We have a commercial website with several pages of conditions being written by juridical people and upgraded often in a normal k2 item to be available for the public. It is not possible to have it in language files. We may use a language string to display different urls for different languages though

As for Facebook and Google, there is a simple opt in as they dont sell things. If you combine acceptation and selling best practice is to have TWO clics, one to accept and one to confirm, which is Apple policy since two years and which is what we would like to implement also.

No ! this is a must for iOS devices, please google it to check that iframe MUST be within a div with height set to be displayed properly on iOS

Ok, so you're just wanting to do a responsive iframe. I understand, will implement responsive iframe support directly built into it for a later release. This is actually directly supported by Bootstrap as seen below.

getbootstrap.com/components/#responsive-embed

forge.joomlapolis.com/issues/5573

As for Facebook and Google, there is a simple opt in as they dont sell things. If you combine acceptation and selling best practice is to have TWO clics, one to accept and one to confirm, which is Apple policy since two years and which is what we would like to implement also.

Then you'll need to implement a custom solution as we don't have anything to fit your needs at this time.

Ok, so you're just wanting to do a responsive iframe. I understand, will implement responsive iframe support directly built into it for a later release. This is actually directly supported by Bootstrap as seen below.

Kyle, sometimes you are long to understand things ! just kidding

I personaly dont want a responsive iframe support. It is just compulsory that you put the iframe and the label/checkbox in separate divs so that we can set a height css for the iframe div for it to be displayed properly on ALL iOS devices.

Understand that when your components are used on business and commercial websites as our, we need adaptation to real uses pretty quickly and I guess lots of people would be ready to pay for this.
You should think about an upgraded dev support if the plan we have is not enough. But these are little things that should be addressed quickly in a business world