Accordion within a box

newbie-question
#1

Hi all,

I’m building a library for elements for work and I’ve been having a hard time with push/pull with this accordion with the element it’s sitting inside. Is there a clean approach to fixing this?

https://2wj58t.axshare.com

accordion.rp (62.3 KB)

Accordion within Accordion (Sandwich method issues)
#2

Because the background border widget is not completely below your “DP_Accordion1” widget, it will not be affected by the push/pull option. Also, push/pull only moves widgets, and what you need to do is actually change the height of the background border to accommodate the height of the accordion (plus padding.)

To demonstrate this, I copied your content from Home to Page 1 in the file below. I separated the background border into a top widget and bottom widget. You can see the bottom widget gets moved with the push/pull because it is below the widget doing the push/pull. Nothing happens to the top portion of the border, so there is a gap.

In Page 2 I added an action to set the size of the background border to fill that gap. But, as long as you are resizing it, there really is no need to have the separate border widgets–you can just resize the one border widget and add in the 15 px of padding (which you show in your Home page.

So, the simplest solution I know of is in Page 3 where I added an OnResize event to to the “DP_Accordion1” widget. This has an action of “Set Size of ‘background border’ to (blank) Width, ‘[[This.bottom + 15]]’ , anchor top.”

  • By leaving the width blank, the width will not change.

accordion RP8 2020-09-03.rp (130.7 KB)

#3

Hey man, that helps a lot. Thanks so much!

It seems like Page 3 is the simplest solution but if i try to add content below the accordion (and still within the box) it pushes that content outside the box and the background of the title bar just fits the size of the accordion like before rather than resizing to the increase in accordion size + its original state.

But if i add content to the option you dropped in Page 2 under the accordion it seems to work fine. Is there a way to use your simpler Page 3 approach while having content under the accordion as well? I would assume it would be something like size of background + size of accordion + 15 (for the padding) but im not too familiar with the variables or names for those things in Axure.

Thanks again for your help man!

EDIT: Also, as soon as I move the elements on the Page 2 option you created everything seems to break.

EDIT 2: I got it working! I changed the OnResize of TitleBarBackground to [[LVAR_ACC1.height + LVAR_ACC2.height + 80]]

In this example above, i had two accordions so i calculated the height of both + the remaining height in the background bar before any movement which seems to have done the trick :slight_smile:

closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.