Web layout issues

Hi, I’m sure there must be a simple, even idiot proof for a web novice such as myself way of laying out a web page. I’m fighting an issue which I have gone round in circles on for a day and don’t have a reliable solution for.

I have attached two pictures. In one, you can see all three graphics at the top lined up nicely. In the other, you can see the graphic has jumped to the left.

I’ve tried the layout editor. I’ve tried locking to the right. Locking to the right and top. Locking to the top only… I’ve tried positioning the control (a WebImageView) in code with and without combinations of the above.

Any suggestions please. I need a reliable solution I can use to position controls such that they locate correctly on a mobile as well as a computer. CSS / Javascript aren’t my thing, I’m more C++ / Obj-C and Xojo… so feel free to treat me like a novice, I won’t be offended.


ios

I should add, I have issues with other controls too - so any advice on how to correctly setup the layout on a page would be very welcome.

I have also tried using containers. The Image on the right which moves is resized before it moves, otherwise it swamps the page. I’ve wondered whether the resizing is an issue…

What are their Left/Top/Right/Bottom constraints set to?

Hi David,
I have tried them both on and off - no difference.

I assume that the first picture is from your desktop and the second one from your mobile, right? Xojo Web is not yet responsive, so w/o fine tuning a lot might look a bit weird on mobile.

Hi Jeannot, that is correct - the top image is my desktop, bottom, my mobile.

Do you have any tips how I can perform this fine tuning?

Well, in session you have a parameter to get the width. You can react to that and make different layouts.

Or you can search this forum for the keyword “responsive”. A few people like @Brock_Nash made some solid work on this topic. But it is nothing where I could now say do this and that and then you are fine. By the end Xojo Web is an “application”, so more oriented IMHO towards Desktop than mobile, where we have iOS (and hopefully soon Android) for it. Plus there is a difference between responsive and adaptive design. I personally believe that Xojo Web can currently max be used to mimic adaptive design than a full-blown responsive solution.

Thank you Jeannot.

I had missed out a detail which I think highlights the issue isn’t quite what I thought it was.

The image is scaled to the screensize. The WebImageView is also scaled by the same amount. If I change the alignment, the rectangle changes position. So it would appear I am not resizing that webImageView correctly. Strange as the other two do resize as expected. I think…

1 Like

Good news, but the challenge remains (as a rule of thumb) that not all of your controls will resize “automatically” on smaller screens. That might be confusing for people experienced in bootstrap for other purposes, as this is actually in that context a strength of bootstrap :wink: .

I agree - it definitely has been confusing. I’m switching to @Brock_Nash’s way of doing it and should have something a lot more consistent in layout when viewed on a tiny screen.

Thank you for your help, it has stopped a lot of floundering.

2 Likes

My pleasure but all kudos go to @Brock_Nash, I only pointed you to the right expert.

@Jeannot_Muller, unfortunately, I’m still stuck.

I’ve followed this as an example:- How to manage responsive design - Targets / Web - Xojo Programming Forum

Unfortunately, the images are bouncing around left and right as I move the screen left to right.

It would appear I need a different model for laying out the screen.

1 Like

Well, as I said, I gave up on responsive design. I use iOS for mobile. And Web for real Web Apps. The only thing I’m doing sometimes is making the login screen as such that a user can login on a phone, mainly for reporting stuff as it is then still possible to scroll through the whole app with 2 fingers.

For a something running more or less nicely on mobile, I assume you would need differerent screens per resolution.