Show/Hide Spacing Issue - HELP!

Ok, so this is my first project, and I am starting to think my new boss is a sadist. I was instructed to create a screen for a thing with minimal guidelines. As in currently it does this for this many (4) - make it do this many (15), here are YT videos for Axure 9, you get to use 10, and go. But…on to my thing. I made the screen meet the requirements. The dropdowns and fields and buttons all work (yay!) BUT I am wracking my head over just this ONE main thing.

Ok, so: click the Add button, new line shows (becomes unhidden) as should. Click the Trash/Delete button and it goes poof (as should) BUT the space STAYS! The row below DOES pull up, but not enough and for the life of me I can’t figure out what I am doing wrong! Doesn’t matter if I trash 2, 7, 12 etc. The only one that poofs like it should is the final/bottom one.

Any tips for this lost newbie would be greatly appreciated! I have been searching EVERYWHERE!


Am attaching the basic primary screen .rp for looksies.

ZNF216_InProgress.rp (92.1 KB)

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.

1 Like

OMG I think you are my bestie now! This was a screen mock-up project with basic functionality (ie already works this way, just make it so can have more of the same). I’ve had NO training just was given videos (i’m a read and hands-on leaner) and an installation and was told AAAAND…GO!

Thanks so much! So glad I found this forum! I go play now!

1 Like

You’ll find some good videos on YouTube and
AxureBoutique has some good stuff too and of course the forum has some great content as well.

1 Like

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