Skip to main content
A
aitor xavierz71574029
Participant
December 21, 2020
Question

Operation as keep center element hide Showing soon elements

  • December 21, 2020
  • 1 reply
  • 555 views

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.

This topic has been closed for replies.

1 reply

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
January 3, 2021

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. 

Atul_Saini
Community Manager
Atul_SainiCommunity Manager
Community Manager
January 3, 2021

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. 

 

Thanks,

Atul_Saini

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices