Hello there! I’m new to Bubble and imagine this is a pretty simple fix, but after a few hours of looking things up, I haven’t found much luck.
I’m trying to move the position of one of my inputs based on the value of a Yes/No drop-down. At the moment, when one value is ‘No’ I’m hiding another input. But, I want to then shift the input after that up to replace where the other value was, because as it stands now, I’m getting a big blank in between, which makes things look unfriendly. Any advice would be appreciated. Thanks!
Hi there, @bernard.agrest… have you tried checking the Collapse when hidden checkbox on the Layout tab of the element that is hidden when the dropdown’s value is no? (Note that you won’t see that checkbox on the Layout tab if the element’s parent container type is set to fixed.)
So, I did some digging but it didn’t really do what I was hoping for it to do. I think I’m missing something super basic, but going to send over a screenshot and hopefully you might see what’s missing:
I want to take the ‘How Hype Are Ya’ input at the end and move it up to where the 2nd ‘Choose an option’ is currently.
I know how to hide things conditionally based on a value, but I’m not really seeing a way to make that last input move up, unless I create an entirely new input that’s a replicate of it and hiding that until a certain condition is met. That sounds like a LOT of work and will make the app really slow, so I’m sure I’m just missing something.
If you want the last input to move up to where the second input is while the third and fourth inputs stay where they are, then I think what you said is exactly what you are going to have to do.
Maybe someone else will have a different idea, but again, I think that’s the way you are going to have to go.
Sorry, slight adjustment to what I meant - the other inputs are going to be made invisible based on the condition of the 2nd input! Does that change anything, or nope? Again, thanks for the quick responses!
You should just need to check the Collapse when hidden checkbox on each of those elements. What is happening when those elements are hidden? Does the last element just stay where it is?
You should check that box on every element that should collapse its height when it (i.e., the element itself) is hidden.
If you want the last input to move up under the dropdown where No is selected in your screenshot, then check the collapse box on the two inputs directly above the last input (assuming both of those inputs will be hidden when No is selected).
Oh, wait… you aren’t expecting that, in your screenshot, the last input would “hop up over” the input above it and take the place of the hidden input, are you?
Sorry, but at this point, I don’t know what you are trying to do. When you collapse an element when it is hidden, the elements below the hidden/collapsed element should move up to fill the space… it’s supposed to be as simple as that.
Hey there, @mikeloc! Sorry for the delay, I think the problem was with my grouping of elements ultimately. I created a group and then put all those elements into the group and now things collapse as I was hoping for them to do! Appreciate your help!!
My other question…is there a way to create some spacing within the elements in the group? When I try to move them apart, it snaps them back together and makes this look a bit disjointed.
Again, thanks for the quick responses!
