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.
I have produced a video to help:
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.
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.
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
Please login first to submit.