- Forums
- Support and Presales
- Developer Members Support
- [#5573] Modal Terms & Conditions in mobile view
[#5573] Modal Terms & Conditions in mobile view
- activha
- OFFLINE
-
Platinum Member
- Posts: 2279
- Thanks: 113
- Karma: 13
8 years 6 months ago - 8 years 6 months ago #272324
by activha
[#5573] Modal Terms & Conditions in mobile view was created by activha
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
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
Last edit: 8 years 6 months ago by krileon.
Please Log in to join the conversation.
- activha
- OFFLINE
-
Platinum Member
- Posts: 2279
- Thanks: 113
- Karma: 13
8 years 6 months ago - 8 years 6 months ago #272326
by activha
Replied by activha on topic Modal Terms & Conditions in mobile view
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
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
Last edit: 8 years 6 months ago by activha.
Please Log in to join the conversation.
krileon
Team Member- OFFLINE
- Posts: 68551
- Thanks: 9095
- Karma: 1434
8 years 6 months ago #272338
by krileon
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Replied by krileon on topic Modal Terms & Conditions in mobile view
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.
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.
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Please Log in to join the conversation.
- activha
- OFFLINE
-
Platinum Member
- Posts: 2279
- Thanks: 113
- Karma: 13
8 years 6 months ago #272341
by activha
Replied by activha on topic Modal Terms & Conditions in mobile view
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
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
Please Log in to join the conversation.
- krileon
- Team Member
- OFFLINE
- Posts: 68551
- Thanks: 9095
- Karma: 1434
8 years 6 months ago #272371
by krileon
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?
Again, I don't have an iOS device so this all may behave differently specifically for that device.
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Replied by krileon on topic Modal Terms & Conditions in mobile view
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.Modal even with two percentages for height and width do not work. They are unscrollable as they are opened as qtips
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?
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.due to the fact that the iframe is enclosed in a div WITH the label and the checkbox.
Again, I don't have an iOS device so this all may behave differently specifically for that device.
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.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
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Please Log in to join the conversation.
- activha
- OFFLINE
-
Platinum Member
- Posts: 2279
- Thanks: 113
- Karma: 13
8 years 6 months ago #272437
by activha
Replied by activha on topic Modal Terms & Conditions in mobile view
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
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
Please Log in to join the conversation.
Moderators: beat, nant, krileon
- Forums
- Support and Presales
- Developer Members Support
- [#5573] Modal Terms & Conditions in mobile view
Time to create page: 0.229 seconds
-
You are here:
- Home
- Forums
- Support and Presales
- Developer Members Support
- [#5573] Modal Terms & Conditions in mobile view