Forum Support

Shape 5
August 02, 2021, 12:09:55 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: S5 Multibox - Ipad content scroll  (Read 344 times)
psw2000
Jr. Member
**
Offline Offline

Posts: 9



« on: October 22, 2014, 02:05:03 AM »

I'm using S5 Multibox feature to show help page popup on my article.
Code:
<a href="xxxxxx" rel="width:600,height:500" class="readon s5mb">Help</a>
It works perfectlty on desktop, android phone or tablet, but on Ipad I can't scroll content box
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: October 23, 2014, 07:13:27 PM »

Hello,

Can you post a URL to this page with the coding applied?
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
psw2000
Jr. Member
**
Offline Offline

Posts: 9



« Reply #2 on: October 27, 2014, 03:41:32 AM »

Hello,

Can you post a URL to this page with the coding applied?
Ok.
http://www.pswi2m.it/cms/index.php/prodotti/software-gestionale-per-professionisti/15-console-telematici
On this page, if you click on "Contattaci" button, you can verify this issue.
You should view a form and after the captcha field there is a submit button labeled "Invia". You can't view this button if you can't scroll inside S5 Box.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: October 27, 2014, 04:22:09 PM »

Hello,

In the Template Manager under Javascripts you need to increase the value for Max Height to a value that shows the button below.

Multibox Max Height

You might also consider just modifying the padding of the containing cells so there isn't as much space between each input.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
psw2000
Jr. Member
**
Offline Offline

Posts: 9



« Reply #4 on: October 28, 2014, 09:01:27 AM »

Hello,

In the Template Manager under Javascripts you need to increase the value for Max Height to a value that shows the button below.

Multibox Max Height

You might also consider just modifying the padding of the containing cells so there isn't as much space between each input.
Ok, this is the naturally solution to this specific page. But my question is more general. It's possible that  S5 Multibox Addon is not fully compatible with Ipad Tablet?
If I use this box to show, for example, an online help with hundreds lines of text (as I mentioned on first post), increase "Max Height" value isn't a solution. I need scrolling feature (on android tablet and desktop client it works perfectly). 
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: October 28, 2014, 08:48:29 PM »

Hello,

Could you PM me Joomla Super User and FTP access so I can take a closer look at the script on your server?
« Last Edit: October 28, 2014, 08:56:20 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
psw2000
Jr. Member
**
Offline Offline

Posts: 9



« Reply #6 on: October 29, 2014, 05:10:04 AM »

Hello,

Could you PM me Joomla Super User and FTP access so I can take a closer look at the script on your server?
It's not a good idea. I'm not authorizated to do this.
What script do you want look? S5 Multibox addon is the unmodified version included in Corpway template, downloaded on 19 September 2014.
Take a look on your site at http://www.shape5.com/demo/corpway/index.php/features-mainmenu-47/template-features/multibox-enabled and test on Ipad the last "Iframe/HTML Example".
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: October 29, 2014, 03:52:42 PM »

Hello,

I looked into this a bit more and it looks like a limitation of iOS. There are a few suggestions/workarounds here though. This would also explain why it works fine on a different device.

http://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #8 on: October 29, 2014, 09:37:55 PM »

Try adding this to the bottom of the multibox.css file and see if this works:

Code:
#MultiBoxContentContainer{
-webkit-overflow-scrolling:touch; overflow:auto;}
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
psw2000
Jr. Member
**
Offline Offline

Posts: 9



« Reply #9 on: October 30, 2014, 06:07:47 AM »

Try adding this to the bottom of the multibox.css file and see if this works:

Code:
#MultiBoxContentContainer{
-webkit-overflow-scrolling:touch; overflow:auto;}
Yes, your solution works like a charm on Ipad; but on desktop now I see double scroll bar (see attached screenshot)
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #10 on: October 30, 2014, 02:07:18 PM »

A solution for that might be to add the code with a @mediascreen trigger so it only occurs on smaller resolutions. Wrapping the coding with something like the below and adjusting the 970px to your desired trigger should work.

Code:
@media screen and (max-width: 970px) {
#MultiBoxContentContainer{
-webkit-overflow-scrolling:touch; overflow:auto;}
}

Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.