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

Content no longer fits artboard when opening an accordion component

New Here ,
Jan 15, 2025 Jan 15, 2025

Copy link to clipboard

Copied

Hi,
I've run into a problem I can't seem to wrap my head around.

I've been experimenting with creating an accordion, which incorporates almost all the elements on my site. I have multiple places where I've made it so that when you press a "see more" button or prompt, extra text/ boxes roll out and pushes the rest of the elements on the artboard down - so far, so good.

My problem is that when everything is pushed down it's pushed beyond the bounds of the artboard. However, if I resize the artboard to accommodate this, then there's empty space to the bottom of the artboard when the accordion isn't opened. I'm guessing it's because the artboard itself is not a part of the component that moves everything, but I can't seem to find a way to work around this. 

 

I've attached a video to try and show what I mean. 
Does anybody have any solutions or ideas? 

TOPICS
Experiment , How to

Views

34

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 17, 2025 Jan 17, 2025

Copy link to clipboard

Copied

LATEST

@Christine29670191wxb6 in the components, your heights are the following:

Default: 2727 pixels high
Billing: 2968 pixels high
Payment Schedule: 2797 pixels high

The issue likely stems from the fact that components in Adobe XD cannot have different artboard sizes.
a) The easiest fix is to have all three heights the same or
b) Since you have 'vertical scrolling set,' can you not allow users to scroll down a little bit? or
c) Use XD's state functionality by hiding or minimize the expanded content. In the "Open" state, display the full content or
d) Use an overlay



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