Text and Button shift in Preview while firing Interaction

#1

I’m having an issue where what I see on Axure is not what I see in the preview.

I’ve created a group of widgets to resemble a modal that’s initially hidden. I’ve set an interaction on one of my faux dropdown options to display the modal when clicked, and another interaction inside the modal to hide it when clicked. When I click on the option to display the modal, the text and button widgets inside the modal shift downward dramatically.

I’ve even tested the modal by leaving the modal initially set to “visible.” It displays exactly how I want, and the hide interaction works as expected. But again, clicking the option to display the modal shifts the inner text and button.

As I briefly mentioned before, the only actions I’ve set within the interaction is to show/hide the modal. Animation and options set to none.

Here’s the modal in Axure.
image

And here’s the modal in preview mode after the interaction occurs. When you get to the page without touching anything, the same initially visible modal displays exactly as it should (pre-interaction)

image
image.png437×739 13 KB

Any help would be greatly appreciated!

#2

Can you share an example file that demonstrates what’s going on?

My initial thought looking at it is: “do you have the modal inside a dynamic panel that possibly has one or more margins applied?”

#3

Sure, here’s a simpler version of my initial project. I’ve tested it to make sure this version also contains the issue. I also have the modal set to visible so you can see that preview mode knows what the modal is supposed to look like.
FunkyModalIssue.rp (166.9 KB)

To get to the interaction that displays the model, click on the dropdown that says “Option Short…”, then click on the “Option Extra Long…” option. The other two options will not trigger the modal display.

Unfortunately no dynamic panel here, at least not for the modal. Perhaps grouping widgets adds some sort of padding/margin that I’m unware of?

#4

A quick update: I’ve opened a ticket with Axure Support because I realized the problem might be happening before the “display modal” interaction.

When clicking on the “Option Short…” dropdown, an interaction fires the show/hide action set to push/pull widgets below to the height of target. This is what displays the options underneath the dropdown, including the “Option Extra Long…” option containing the modal’s interaction.

My theory is that the show/hide interaction is pushing the modal’s text/button content because it’s technically below the dropdown, despite the modal being hidden.

I’ll provide another update when Support gets back to me :slightly_smiling_face:

#5

Final update: my theory is confirmed! The show/hide action set on the dropdown was pushing the modal content down because it was technically below the dropdown.

image
image.png817×623 66.6 KB

The solution was to add the group of widgets making up the modal into a dynamic panel to prevent the contents from being broken up.

image
image.png817×798 73.6 KB

Thanks so much to Axure Support for the quick and helpful response! :heart:

closed #6

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