LockHorizontal does not work

Targets Web
1

I am newbie in xojo and I use 2020r1.2.

I want to center a WebContainer in the page. The documentation says to use LockHorizontal and LockVertical, but in my code it does not work and I am obliged to use LockLeft and LockTop in Shown Webpage event and I have to calculate the left position in Resized event.

Here my code in Shown event

Var cws as new CntWeatherStation
dim PosLeft as Integer

cws.LockLeft = True
cws.LockRight = False
cws.LockTop = True
cws.LockBottom = false
cws.LockVertical = false
cws.LockHorizontal = true
PosLeft = (Self.width - cws.Width)/2
cws.EmbedWithin(self, PosLeft, 0, cws.Width, cws.Height)

MasterContainer = cws

And in Resized

dim PosLeft as Integer
 
If MasterContainer = Nil then
  Return
end If

PosLeft = (Self.width - MasterContainer.Width)/2
MasterContainer.Left = PosLeft

It works but the repositon of the container during the resize is not flowing and it would be better if LockHorizontal and LockVertical work.

2

Can you just have lockleft false and lockright false?

That should center it horizontally.
It could be that the left and top are not given, i noticed that on some parts since they where a percentage instead of pixels

3

If I set lockleft false and lockright false the container is placed on the right side and the browser shows an horizontal scroll bar.

In the documentation:

LockHorizontal overrides LockLeft and LockRight. It allows you to proportionally lock a control’s position to the center of its parent control (or web page).

So if LockHorizontal is true the values of LockLeft and LockRight are overrided,

1 Like
4

Should be the same output.

5

There are 2 embedwithin methods:
http://documentation.xojo.com/api/user_interface/web/webcontainer.html#webcontainer-embedwithin

Tried using the one worhout the left and top?

Or you could try and set the postion locks after the embedwithin call…

6

If I use the one without left and top I receive a runtime exception UnsupportedOperationException
“You must specify X and Y when the parent view’s layout type is Fixed”.

If I set LockHorizontal and LockVertical after embedwithin the behaviour does not change and the issue is still present.

If I set also LockLeft and LockTop after embedwithin the container is not centered but is on the left side.

7

At the end the only solution I found was to redesign my application: instead of having all the components inside a web container I put only a few components and the others inside the web page