• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Operation as keep center element hide Showing soon elements

Community Beginner ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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.

TOPICS
Design , How to , Product performance

Views

332

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 02, 2021 Jan 02, 2021

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 02, 2021 Jan 02, 2021

Copy link to clipboard

Copied

LATEST

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. 

 

Atul_Saini_0-1609656342516.png

Thanks,

Atul_Saini

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines