Controls in WebContainer align to page not the container (2020 R2.1)

I’m trying to use a WebContainer to group controls and keep them neatly aligned, then placing the WebContainer onto a page where I want to lock the LeftRightTopBottom.

The WebContainer aligns correctly with the locked positioning, but the controls in the container appear to want to align to the page - not the boundaries of the WebContainer.

Any tips? Thx!

Locking all edges of the container will cause the container to stretch or shrink to fit the browser size. Is that what you want?

I typically use a container to center my controls on a page and therefore only lock the top aligning the container on the center of the webpage. With both left & right unlocked the default is place the center of the container at the offset of it’s placement relative to the center of the webpage in the layout editor.

In this instance I’m creating a container with a collection of controls. The controls are supposed to hold their exact positioning inside the container - the container however is set to center horizontally and vertically.

SMALL BREAKTHROUGH: Putting the controls in another container, then placing it inside the other container lets me ‘contain’ the controls by having the sub container only tall enough to contain things, giving no space for them to wander as a page is resized.

1 Like

Seems that embedding WebContainers within WebContainers is the solution.

I’ve experienced a few embedding issues with WebContainers

This raises an interesting point - is the behavior I am seeing now going to change, and break things? I’m now committed to using a WebContainer with four-sided constraints and having it center Horiz and Vert, and stay constrained to the exact size of the container - but how do I know if that is “intended” behavior, or if in the future a ‘fix’ will start making the embedded container suddenly start stretching?