Android Sizing Problem

WEB TMS WEB Core
1
Hi,

When my web app is run I center the login screen. This works in all browsers fine, including Chrome except on an Android device. I do this in the forms WebFormResize event but the Self.Width & Self.Height are returning much larger values than, I think, they should.

Is there anything I should be aware of for Android devices? It works fine on an iPhone.

Thanks,

Ken
2
I'll give an example so that this problem is better understood. In a simple test I have a panel aligned to the client with a label inside it. The label is also aligned to the client and the text is set be in the center.

This works fine on all browsers except android. Please see an example of this at test.simplyaccounts.net
3

I can reproduce the behavior you describe on a Nokia Android phone. I can also confirm that it works fine on desktop and iPhone. This is all very strange as you will certainly agree that the Android Chrome app will most likely use the same browser as Chrome on any other device.

4

Yes, very strange. Is there anything you can do to fix this as I have been unable to do anything to change this. I have tried changing the form size but makes no difference!

5

Be assured, I have passed this on to our engineers and they are looking into the issue. 

6

I have tested this here on 3 different Android devices and on none, I could see an issue.
The test project is:

http://www.tmssoftware.net/public/centering_android.zip 
If a problem persists, please provide a sample source project & detailed step by step information, operating system version, browser version, ... to reproduce this.
7

Now please try doing the same thing vertically!

8

I changed code to:


procedure TForm1.WebFormResize(Sender: TObject);
begin
   webpanel1.Left := (width - webpanel1.Width) div 2;
   webpanel1.Top := (Height - webpanel1.Height) div 2;
end;

and I can still not see a problem on Android devices here!
https://snag.gy/rqBi7Q.jpg">

As I mentioned, please provide sample, full information AND detailed steps.

Bruno Fierens2019-07-03 17:37:52
9
When you copy it to a a web server to test with an android device, is that an apache server?

Holger confirmed he had managed to replicate the problem. Are you saying there is not one?
10

I am not saying there is no problem, not sure where you read that. I am saying that I can not see it and cannot reproduce it based on the information given and I did the effort to create a test application myself (twice) and provided it. Unless I get something with which I can reproduce this, there is nothing more I can do at this moment.

11

I appreciate that. I've just had to rebuild my main PC but will provide something shortly.

12
Please try this source code http://test.simplyaccounts.net/Simple.zip it is just a centered label in a panel.This is the main problem I have. When run on an android phone the form is bigger than the screen and whatever I try I cannot make it fit the screen.
13

I tested your project on an Android phone:

https://snag.gy/2WU3GK.jpg
14
Hi,

Two things. Can you test it on a an android 8.1 phone and can you use the uploaded web app at http://test.simplyaccounts.net/index.html

Thanks,

Ken
15

I seem to have found a solution to this. If bootstrap is included in the javascript libraries it works fine.

16

I was about premature. There are still significant problems on an android phone. I will try to provide a better example..

17

Just providing some feedback here as I have found the reason for problems on Android devices. I, probably like many other people, use a TWebPageControl with multiple hidden tabs so that apart from some modal popups, I basically have one form. It's not a huge app. This page control is aligned to the client. The problem is that when the forms OnResize event is called, the size of the page control has not been changed. The fix for this is to also set the HeightStyle and WidthStyle of the page control to ssPercent. The problem then goes away. This only seems to be a  problem on Android devices.