Paul de vos
Posts: 0
Joined: Mon May 19, 2014 10:27 pm

Problem HTML component and layout of wrapped webpage

Hello, i'm trying to wrap an external website to the container frame using the html component.
I followed the this tutorial:
http://docs.appery.io/documentation/u...

It doesn't seem to work. Don't know what i'm missing.
I've tested in browser and phone tester. It overlaps in the browser and ads a frame in the phone tester but with no scroll functionality or wrapped layout.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Problem HTML component and layout of wrapped webpage

Hi Paul.

Please provide us with screen shots of problem and describe them.

Specify please if this issue reproduces in the "test" mode in browser. See details: http://prntscr.com/3krt3i/direct

Also give us a public link to your app and describe steps to reproduce your problem.

Thanks & Regards.

Paul de vos
Posts: 0
Joined: Mon May 19, 2014 10:27 pm

Problem HTML component and layout of wrapped webpage

Thanks for the support Yurii.

The issue reproduces the same problem in both "test" mode in browser,and test iphone appery.io app.
Image

As I mentioned, I followed this tutorial about Wrapping external document (http://devcenter.appery.io/documentat...)

The app has one screen(strartScreen), with the html component.

What I want is for a website to fit (integrated, optimised, scaled to) in the borders of the screen behind header and footer. But instead what happens is the website appears in a iframe (not a problem), one has to scroll horizontal and vertical so see other parts of the website.

How can i share the app with you, should i export an apk and upload?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Problem HTML component and layout of wrapped webpage

Hi Paul.

Yes you can share you APP with our account: a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a

Please see how to do it in this document: http://devcenter.appery.io/documentat...

Regards.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Problem HTML component and layout of wrapped webpage

Hello Paul,

Little update: when it will be done, please post app name, steps to reproduce, also clarify what device/OS version you use.

Paul de vos
Posts: 0
Joined: Mon May 19, 2014 10:27 pm

Problem HTML component and layout of wrapped webpage

Thanks, I shared project with support.
App name: Console Games
Ive got a start screen with two buttons, each linking to a new screen with a html component that displays a website.
What i'm experiencing problems with is the the way the website is displayed.

I followed and reproduced these steps excactly:

Image

Browser test:

Image

Android tablet test:
Displays correctly except when I switch orientation (turn device) and back again produces results that only fills half the screen
Image
Image

Paul de vos
Posts: 0
Joined: Mon May 19, 2014 10:27 pm

Problem HTML component and layout of wrapped webpage

Here is a view from ios7
Results display a zoomed area of the website, and no scrolling functionality.

Image

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Problem HTML component and layout of wrapped webpage

Hello Paul,

Tell me please do you still get this problem? I've just tested your project in the Chrome browser. It works properly. Here are screenshots:
Image
Image

Paul de vos
Posts: 0
Joined: Mon May 19, 2014 10:27 pm

Problem HTML component and layout of wrapped webpage

Hi Evgene,

I still have the problem, and the screenshots you posted is the same problem I'm experiencing.
I want the website to fill the screen (container), not half with scrolling bars.
Please see below screenshot from your tutorial on wrapping webpages:
Image

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Problem HTML component and layout of wrapped webpage

Hi Paul,

Set size of component html=auto as is shown here:
http://devcenter.appery.io/wp-content...

Use the following CSS: precodediv div.htmlOtherSite{
position: absolute;
left: 0px;
right: 0px;
top: 54px;
bottom: 54px;
overflow: visible;
height:100vh;
}

#ScreenName{
overflow: hidden;
}/code/preWhere 'ScreenName' is a page name.

Return to “Issues”