Hi, I have a square element box with a number in the center of the square, I want this number to always remain inside the height and width.
Just below the number (also inside the parent box), I have another responsive element box with five colored balls inside, in horizontal formation and stack property. Every time I show or hide one or more balls, the size of this last element (width) adjusts itself, by the stack / resize property.
The problem is: I want the element box of the balls to remain horizontally centered in relation to the square parent box and its brother the number. Currently, when the ball box is resized, it does so by remaining fixed to the right side, it does not remain atomatically centered.
Can anyone suggest or help how a position can be forced when an element changes size due to showing / hiding any of the components of an element? It is important to show or hide it, resizing with the mouse the largest element if it respects it , but hiding or showing the components of the ball box does not.
Can you put in the values of eg padding operators like 50% - "(x value)" px?
Thanks a lot.
Hi there. Unfortunatelly, I don't think there's a way to currently achieve this. You will have to adjust the position manually between each screen, so that it's always centered.
You basically need the "anchor" of that group/stack to be attached to its center, instead of to the left corner, but we can't edit this right now. I thought it can be done with padding, but it will just resize the containing group/element the same way. The showing/hiding of stack elements is basically ignored by the responsive resize setting. It only works with transforming or scaling things.
Xd can do some math within the values on the right, but it only does it once you enter it there, it doesn't keep it as a logical rule to apply dynamically.
Hi Aitor Xavierz,
Thank you for reaching out and sharing the details and a video. I agree with Spas K here, it wouldn't be as dynamic as you're thinking, however, the basic version can be achieved by adjusting padding.
We need two stacks here. Group 1: 4 circles with the boundary (rounded rectangle); Group 2: Bigger box + Group 1.
The stack of 1st group is working fine for you. I would request you to replicate the properties of Group 2 as shown in the screenshot. Let me know if that works for you.