SOLVED-Web Pages right scrolling and floating on IPAD

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

SOLVED-Web Pages right scrolling and floating on IPAD

Post by ColinM » Tue Jan 03, 2017 7:10 am

Hi Pablo

OK, The big Tourist Bureau web project I'm working on which is almost finished! :shock:

Having problems with a few pages.

A) There are 7 Break Points - 1920 (Default), 1580, 1260, 1024, 768, 480 and 320.

B) The project uses a master page.

C) Some pages have default layers for multiple object containers - for each Tourist Bureau member - so I can move objects around in "modules".

D) I also deploy a sticky layer - bottom right with a 122 px offset (so it sits above the Master Footer)

All is fine, except that for some pages, when I display the 1024 and 768 view-ports on my IPAD (landscape and portrait respectively) in either Safari or Chrome these pages will scroll right, that is, they won't "lock" into the view port.

Normally I would say this is a sign that there is content outside (to the right) of the view port or objects who's boundaries are outside the view port. But I've checked for that in both the page and the respective master page.

HERE is an example - just that page and the master - so the links won't go anywhere.

Can you wave your magic wand Pablo and suggest a solution please? :D
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 17995
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by Pablo » Tue Jan 03, 2017 7:44 am

I think this is related to the sticky layer.
The sticky layer monitors scroll events, so if you scroll to the right then it tries to adjust its position. This causes the browser to activate the horizontal scrollbar because there is now an object (the sticky layer) outside the page boundaries...

User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by ColinM » Tue Jan 03, 2017 7:46 am

Pablo wrote:I think this is related to the sticky layer.
The sticky layer monitors scroll events, so if you scroll to the right then it tries to adjust its position. This causes the browser to activate the horizontal scrollbar because there is now an object (the sticky layer) outside the page boundaries...
Thanks Pablo - I thought that too - but I use the same sticky layer on other pages without any issues.

I also removed the sticky layer and had the same problem.
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 17995
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by Pablo » Tue Jan 03, 2017 8:08 am

I see multiple sticky layers. Did you remove them all?

User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by ColinM » Tue Jan 03, 2017 8:17 am

Pablo wrote:I see multiple sticky layers. Did you remove them all?
Ah, sorry, I've now removed them - it stops it from moving to the right - but in both the 1024 and 748 view port the screen still "floats" to some extent to the right. That is the view shifts if you swipe the page left.

But that doesn't explain why other pages have the RH sticky layer and the pages are horizontally rigid in the view port?
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 17995
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by Pablo » Tue Jan 03, 2017 8:26 am

The only other thing I can think of is the map code.

User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by ColinM » Tue Jan 03, 2017 8:44 am

Pablo wrote:The only other thing I can think of is the map code.
How do you do that Pablo! :lol: It appears you may be right.

The page I linked to has the std Google embed code in the HTML object, plus the 100% width and height settings plus a zoom and central gps code - but the issue also occurs with just the basic google map generated code and 100% height and width settings.

I can get around this by having another sticky layer on the LHS for the 728 and 1024 viewports - messy I know, whilst it doesn't lock the screen in the view port it does prevent horizontal scrolling.

I need a beer! :mrgreen:

By the way, for type in the properties of the HTML box I'm using Use<div> to set position and size.... is that correct?
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 17995
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by Pablo » Tue Jan 03, 2017 12:20 pm

By the way, for type in the properties of the HTML box I'm using Use<div> to set position and size.... is that correct?
Yes, that is correct.

User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Web Pages right scrolling and floating on IPAD

Post by ColinM » Tue Jan 03, 2017 11:59 pm

Pablo - and anyone following this thread, I've found a solution!

Reduce the width (from full view port/break point) of the HTML container in the 1024 and 768 view ports (you can still leave the 100% parameters so you can use the same object across view ports.
Yours truly
Colin M
Western Australia
My Website

Joseph1982
 
 
Posts: 38
Joined: Mon Oct 10, 2011 3:00 pm
Contact:

Re: SOLVED-Web Pages right scrolling and floating on IPAD

Post by Joseph1982 » Fri Jan 06, 2017 7:56 pm

Hi ColinM
Please give a simple tutorial for newbies.
I have the same problem. the sticky layer dose not appear over the layers in 768 view port and makes page scroll able to right.
http://www.tekmosa.co.nf

User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: SOLVED-Web Pages right scrolling and floating on IPAD

Post by ColinM » Fri Jan 06, 2017 10:31 pm

Joseph1982 wrote:Hi ColinM
Please give a simple tutorial for newbies.
I have the same problem. the sticky layer dose not appear over the layers in 768 view port and makes page scroll able to right.
http://www.tekmosa.co.nf
Hi Joseph,

You have raised two issues in your request, so I'll address them individually:

the sticky layer does not appear over the layers in 768 view port - this is more than likely caused by the Z order (how the objects are layered or stacked) of the sticky layer - make sure that the layer and it's contents is on top by moving it to front above all other objects in your pages - the layer should be the last entry in the respective page Object Manager list.

and makes page scroll able to right. - first check that all the objects are in the view port AND that the objects boundaries are also in the view port (check render hidden objects and object outlines in the View(Ribbon) Tab. Although the layer is set on RHS place the layer object and it's contents on the LHS - I've put mine top LHS using Reset Position (natural mouse right click the object in the Object Manager list).

Hope that helps. :D
Yours truly
Colin M
Western Australia
My Website

Joseph1982
 
 
Posts: 38
Joined: Mon Oct 10, 2011 3:00 pm
Contact:

Re: SOLVED-Web Pages right scrolling and floating on IPAD

Post by Joseph1982 » Sat Jan 07, 2017 4:58 pm

Hi ColinM,

As you described, I moved the Z order of the sticky layer and it appeared as the last entry of respective page object manager. Then previewed the page on Firefox responsive design mode. The blank space was still there and the sticky layer did not appear over the layers.

I checked RHO and object outlines in the view tab and all the object boundaries were in view port except for invisible bookmarks, html objects, pace extension and also sticky layer. I deleted the sticky layer completely and previewed the page, again there was the blank space and page does not fit in tablet mode.
I pressed cntl+z and reset the position of invisible bookmarks, html objects, pace extension and also sticky layer to the left hand of the page and previewed the page on Firefox.

wow! its solved. now the blank space is removed and sticky layer appears over the layers.

Thank you ColinM for your guides.

User avatar
ColinM
 
 
Posts: 469
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: SOLVED-Web Pages right scrolling and floating on IPAD

Post by ColinM » Mon Jan 09, 2017 12:58 am

You are welcome Joseph - glad it helped and you solved it. 8)
Yours truly
Colin M
Western Australia
My Website

Post Reply