EmbedWithin and page position

Targets Web
1

Using the IDE I can put a control locked Left/Top, Center/Top, Right/Top, Left/Middle, Center/Middle, Right/Middle, Left/Bottom, Center/Bottom and Right/Bottom like this:
image

If the page grows the controls move to keep the distance to the WebPage border or the Center and Middle of the page just by changing the locks:
Left/Top
image
Center/Middle
image
Right/Bottom
image
You get the idea.

Now I’m trying to use EmbedWithin and replicate this behavior without success. The only one I can do is the Left/Top.

I reviewed Feedback cases like:
61543 - Web 2.0: EmbedWithin is being positioned by percentage instead of pixels
61210 - WebContainer.EmbedWithin does not honor the Left and Top parameters

The code in the browser for Center/Top button is:
<div id="WU8MdJ" class="XojoButton" style="left: 50%; top: 20px; width: 150px; height: 38px; margin-left: -75px; position: absolute;">
but the container using EmbedWithin is:
<div id="y9jPhu" class="XojoContainer" style="left: 15.83%; top: 20px; width: 150px; height: 38px; margin-left: -75px; outline: none; position: absolute; overflow: initial;">
so the only difference is the left %

I don’t understand why or how that value is calculated (15.83%) and not use 50% as used with the IDE, the code to embed is:

var mycc as new ContainerControl1
mycc.LockTop = True
'mycc.LockLeft = False
mycc.LockHorizontal = True
mycc.EmbedWithin(Self, 20, 20, 150, 38)

I tried without LockLeft, with LockLeft = False and with LockHorizontal but nothing works as I expected.

Do you think it will be possible to change how EmbedWithin works to replicate what we can do with the IDE?

The other thing is the right and bottom locked controls, for example Right/Bottom button, the code in the browser is:
<div id="UiWHHZ" class="XojoButton" style="right: 20px; bottom: 29px; width: 150px; height: 38px; position: absolute;">
and the code for EmbedWithin
<div id="Un2cou" class="XojoContainer" style="right: 430px; bottom: 342px; width: 150px; height: 38px; outline: none; position: absolute; overflow: initial;">
the problem I see is that EmbedWithin uses:

WebContainer.EmbedWithin(View as WebView, left as Integer, top as Integer, width as Integer, height as Integer)

so there is no way to indicate a right and bottom value.

I was thinking of using something like this to compensate and instruct Xojo that the values are not left/top but right/bottom:

var mycc as new ContainerControl1
mycc.LockRight = True
mycc.LockBottom = True
mycc.EmbedWithin(Self, -20, -29, 150, 38)

but that may cause conflicts with people that want to actually use -20 as Left. So I’m think if it is possible to add something like

WebContainer.EmbedWithin(View as WebView, left as Integer, top as Integer, width as Integer, height as Integer, right as boolean = False)
to have an optional value to indicate that instead of using Left/Top use Right/Bottom for the first 2 values.

Does this make sense?

2

61593 - Embedded WebContainer’s Controls not locking properly
<https://xojo.com/issue/61593>

Unfortunately locking is a current bug. Also remember to set the locks before embedding. And you can always embed with (self.width - control.width - margin) (Similarly for height) to get the control in the corner

1 Like
3

Thank you Brock.

To fix my issue I found the solution reviewing case 60131 I can use a workaround until the issue is fixed, just need to see what triggers a Style update and avoid that.

4

I added case 64386 as a feature request because most positions need a way to tell Xojo the right and bottom margin with EmbedWithin and right now we only have left and top.

I think .LockHorizontal and .LockVertical should be setting left and top to 50%, not sure if Greg agrees with that as a bug.

Found a workaround to be able to position the container as I wanted/expected, the code is in the sample. I don’t know if this is the best way to do it but so far, with my limited test, it works.

5

I hope this layout issue will be fixed soon. Nested WebContainers (63141) are also broken. Unfortunately, this issue is blocking the entire project conversion… From @Greg_O_Lone 's answer I really think he didn’t understand the problem of my feedback… If you draw WebContainers in WebContainers the coordinates are wrong.

6

Is the problem with your example that the Container is not resizing? so the listbox keeps the first shown size?

I think the problem is that Xojo is sending the width/height of the container according to the browser size instead of sending width: 100% height: 100% in this example.

You just need to add:

bv.View.Style.Value("width") = "100%"
bv.View.Style.Value("height") = "100%"

after bv.View.EmbedWithin

So I’m not sure if this is a locking issue or a different problem.

Edit: the inset values look strange 0px -840px -220px 0px when I load the app and tab full width/height, it changes to 0px 168px 119px 0px if the browser tab is small, I don’t think the inset should change but I’m not sure.