Welcome to the wonderful world of Axure, there’s a bit of learning curve but it’s really the fastest way to make a prototype!
First, I’ll explain what is going on here and why it looks wrong and how you could fix this version. Then I’ll explain some better ways to do this because you’re going to have a bad time in the long term with this current structure.
What is going on? Why is there extra space?
That extra space is there because your Delete button Interaction hides the row and then pulls up everything under it by the height of that element, 40px in this case. It’s doing just that. The space you see left over is that 35px gap between the two elements.
It’s behaving properly on the last one because it has no gap.
How do I fix it?
If you just want to fix it now to get it out the door, here’s what you can do: Change Push/Pull Distance to “Custom” and set it’s value to [[Target.height + 35]].
Target.height is the height of the element that the action is targeting, in this case that group defining the row.
35 is course the space between the rows.
A better alternative
Some problems reveal themselves here:
- what if you have to modify the spacing between rows? yikes, that’s 15 manual changes - nightmarish
- what if you have to add/remove rows?
- what if you have to make that button at the top clickable?
This sort of list/grid pattern is exactly the sort of thing the repeater control is for. But, there’s some particulars about repeaters that require thinking about interactions a little different than usual.
When we make a change to a control inside a repeater, we need to update the repeater data when we do. Why? Because when a Add/Remove/Sort/Filter (likely others too) action occurs on a repeater, it redraws THE WHOLE REPEATER row by row. So if you change the Name of something, it’ll stay visible on the page. But when you Add/Delete a row, that Name value will disappear because it isn’t saved in the Repeater data.
I recently wrote another post that goes into more detail with this including a couple demos.
I’ve modified your file to make it work with how you did it, I took a couple guesses at what the row at the top is supposed to do. I also demonstrated two different alternate methods that I think will serve you better:
You’ll need to download the RP file itself to see what is going on. Between this file and other post I linked to above, you should be able to figure out what’s going on. Feel free to reply with any questions or send me a message directly and I’ll help you out.
ZNF216_InProgress_Fixed.rp (138.4 KB)
One interaction is still missing, which is the inserting of rows in the middle of the table, at the moment all Add buttons add a row at the bottom of the repeater. It may be sufficient to just describe this behaviour, if you need to demonstrate it in the prototype, take a look at this forum post that describes a method for inserting rows in the middle of a row. It requires a bit of Filtering, Sorting and math.