Phone profile not showing whole Page

0
0

Hi.

I have a main Page which has the NavigationBar extension docked on the left, a FlexLayoutPanel docket on the top and a Desktop with a Dock set to Fill on the right side of the NavigationBar and on the bottom of the FlexLayoutPanel. Works perfectly. However, when I run it on a cell phone (tested on iPhones so far) the Desktop will be shown filling the whole view-port, not showing the NavigationBar nor the FlexLayoutPanel. We have to use the gesture to shrink the page and then they will be there and will show up and the whole Page will be visible. If I test this on a Chrome browser emulating the iOS, it works just fine. I have attached a picture showing the are that will be displayed at first.

Any ideas on how I could fix this?

Thanks in advance.

Ivan

Attachment
WJ_Desktop.png
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Hi Luca.

I have produced a video to help:

https://drive.google.com/file/d/1WdDkEop0GLVOuT1SfrsOpW7RqScuBDxJ/view?usp=sharing

  • Luca (ITG)
    Got it. Looks like the phone auto zoom when editing. Can you send me a way to log in? Send it to support [at] wisej.com.
  • Ivan Borges
    Done. Thank you so much.
  • You must to post comments
0
0

Hi.

I think I have got something new to add to this issue.

In my application, the user lands to a Login Window first. From there, I go to the Main Page on the user’s click to the Login button. This way, the Page gets cropped on the device, but once there, if I Reload the page through the Chrome Reload menu, it refreshes on a proper way and the entire page is shown. So, I changed the application to skip the Login Window and go straight to the Main Page and in this way, the page just loads correctly the first time.

So, there is something here when navigating from the Login Window to loading the Main Page.

As a workaround, I thought of programmatically calling a Reload after the Main Page is “Shown” in case of Phone Profile, but haven’t found out how.

Hope this helps in getting to some solution.

Cheers.

Ivan

  • Luca (ITG)
    In the chrome emulator you need to reload to detect the user agent change. Try with a real phone and let me know. Usually users are not able to change a desktop into a phone :)
  • Ivan Borges
    Yep, Luca, done that. By the way, it works always fine in the Chrome emulator. It is in the actual phone that this is happening. I just signed up for a trial at Kobiton (https://kobiton.com/) and also tested in other devices (real ones), and had the same results.
  • You must to post comments
0
0

Here it is:

On iPhone SE

  • You must to post comments
0
0

Hi Luca.

Thank you so much for the reply and the sample.

And yes, mine was set up just like yours, same docking configuration and it also worked just fine on emulators. The problem is when I use an actual mobile phone, in this case an iPhone SE and and iPhone 8. I got puzzled and to test it I published your own sample… surprise, got the same results, attached the screen-shot.
However, I have a feeling I have found out what is going on. I have 3 monitors in my dev machine, one of them having the resolution of 3840 X 2160. So, when I edit the Page, it shows it huge and apparently its size is set according to this monitor resolution. For a Window, we can define its size for a Phone profile, but for the Page, it looks like we can’t, so we are not able to say that for the Phone this Page should look smaller, and being huge, depending on the proportions, the Responsiviness is producing weird results on the actual phone. If I open your sample, edit your page on another monitor (normal resolution 1920 X 1080), build the solution and copy the DLL to the publishing server, it works fine. On the other hand, if I open it on my big monitor, save it, build it and publish it, I get the result on the screen-shot attached.
So, the question is, are we able to limit the Page size in the designer for different profiles? Does this even make any sense?

By the way, thanks for the fancy Blazor nomenclature. I will make sure I will show it off around. Man, I will never catch up.

Cheers.

Ivan

  • Ivan Borges
    Sorry, it looks like I am not allowed to attach any other file, apparently it is 5 per thread. If you want, I can e-mail it to you.
  • Luca (ITG)
    The size of the design page doesn’t matter. Mobile devices now have all sorts of resolutions. When the control is docked or anchored it’s relative to the container. It’s like when you rotate the phone, it acts as it the browser was resized. Did my sample fail for you on an IPhone 8? If that is the case then there is something wrong with the viewport meta tag support. Do you have another device to try it on?
  • Ivan Borges
    Yes, it failed on 2 iPhones, one SE and one 8. Have a try: http://wisej.test.profilme.net/
  • Ivan Borges
    And the viewport is just like yours in the sample.
  • Ivan Borges
    Sorry, I lied… :-) It fails on the SE only, works fine on the iPhone 8. Oh, boy.
  • You must to post comments
0
0

Hi Ivan,

I depends on how you arranged the docking. When you use the Desktop control in a Page then the main container is the Page and the Desktop is a child in the page. Floating windows will be managed by the Desktop and limited to the Desktop but the controls in the Page are at the same level.

If you want the Desktop to be the main container then using Application.Desktop = new Desktop() (or new MyDesktop()), in that case there is no MainPage but there is a main Desktop.

Coming to your sample, I tried something similar but I arranged the docking to have the navbar and flexlayout top panel reduce the space used by the desktop child. You can do that by using Bring to Front and Send to Back in each control in the designer or use the outline viewer. See attached video and notice how the dock fill changes when I change the position of the control in the rendering tree (to use a fancy blazor word instead of control collection, children, …)

See also attached sample and video https://www.screencast.com/t/ZMo8uBtZmHsZ

Attachment
image.png image.png image.png Wisej.MobileTest.zip
  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.