Best approach to manage container size on multiplatform web app

I have a web app that is useful on phone, tablet and PC. The main page is designed with a container on the page. For PC browsers - the app looks best when the container does not extend across the whole screen, so I like to not lock the container at least on left and right (keeping top & bottom unlocked is also desired). However, for phone and tablet browsers, having the container extend the full screen (both horizontally and vertically) works best.

Bottom line - locking container is good for small platforms, unlocking is good for larger platforms.

So, I implemented some code to ID the platform type, and make the adjustment to resize the container appropriately when the page is resized, but doing that doesn’t look very clean because you can see the container being drawn first, then drawn again.

I am not sure I have found the best option for managing the appearance of this multi-web-platform app. Any advice?

If you haven’t already, try putting the code in the Open event of the WebPage or WebContainer that sets the lock and size properties of the WebContainer.

RubberViewsWE has been conceived to solve such issues. I created it basically to go around the sometimes inadequate locking mechanism.

You might also consider embedding the container at runtime. Then you can decide (before you embed it) whether or not to apply the locks.

OK - nothing else seems to work (notwithstanding Michel’s suggestion - yet), so I tried what Greg recommends. The code is below in the Open event of the page. I have specified the Container as a property of the page (because some of my code references the container, and won’t compile without that property existing).

With the code below, the container seems to take on the correct size on the page, but I can not get the top left corner of the container to be placed anywhere but 0,0 on the page. Also, the contents of the container do not properly adjust to accommodate the updated container size; I have a toolbar and a listbox (and many other controls) on the container, and they to not expand to the updated container size. I am using 2015r3.1 for this. Any other ideas?

This is in the WebPage.Open event…

[code] if Session.Platform = WebSession.PlatformType.Windows Then

Dim containerWidth As Integer = 400
Dim containerHeight As Integer = 400

MobilePageContainer1 = New MainViewContainer

Dim l As Integer = (Self.Width - containerWidth)/2     // center container horizontally on the page
Dim t As Integer = (Self.Height - containerHeight)/2    // center container vertically on the page

MobilePageContainer1.LockLeft = False
MobilePageContainer1.LockRight = False
MobilePageContainer1.LockTop = False
MobilePageContainer1.LockBottom = False


MobilePageContainer1.EmbedWithin(Self, l, t, containerWidth, containerHeight)
MobilePageContainer1.Visible = True

End
[/code]

I would suggest looking into Responsive Design.

Controls can adjust their position based on the current screensize. If the user rotates their device or changes their window, then controls will automatically resize. Typically this follows a mobile first approach too.

These conversation might help you with implementation:
https://forum.xojo.com/19701-animation-and-material-design-in-xojo-desktop-apps
https://forum.xojo.com/19039-jqueryui-library-drag-drop-animations-custom-menus/0#p202655

I will spend more time on that topic - thanks. However, the point is, if the resizing and locking of the container on the page worked as expected, I would have a delightful experience on phone, tablet, and desktop environments. I have already designed for mobile first, and that is how I got to this point. Now I just need the container and the page to behave as expected.

My code, should accomplish what I need. I already got this all to work after everything was drawn, then I resize appropriately - but as you can imaging, seeing the main container get resized before your eyes is not the best visual experience for the user. It would be better if the resizing could happen BEFORE things are drawn. And that seems to be where the problems are.

Really? Nothing new in 4 hours.

OK - let me clarify. All I want is to know where I can set the container size and lock values, so that when the app/page starts up the user sees the container as it should be (without it changing size before his very eyes) and where on the page is should be, and so that the locks on the container act as expected (small devices: locks are on, large devices: locks are off).

Isn’t this basic (no pun) functionality that should work with the built-in capabilities?