Collapsing input width inside a RG


I would like to collapse an input width conditionally when the next input is not hidden.

I´ve searching the forum for the past 2 days and got nothing.

Anyone can help?

Thanks a lot.

have you tried to use hiding rules on the Responsive tab?
Try to add a hiding rule If parent width is > 1 and select a parent element (lower right corner) = your next input field . It will check out the width of the next input field and if it’s more then 1 px your first input field should become hidden

Thanks for your reply @agilityinusa

The thing is that I have 4 fields nex to to each other. Let´s say input 1, input 2, input 3 and input 4.

The input 1 needs to collapse when input 2 is shown.

I don´t know how to achieve it even in the way you said it:

Do you know how to achieve it?

I´ve found this code by,

But I don´t know how to use it in my example:
<style> #position-relative { position:relative!important; left:0!important; } .bubble-r-box < #search-box-notes { max-height:500px!important; } #meeting-box{ max-height:500px!important; position:relative; overflow:none; } #floating-group{ overflow-y:scroll; height:100%!important; } </style> <script> $(document).ready(function() { $("#position-relative").parent().css({"position"."relative","left":""}); }); </script>

@mishav @johnny @NigelG @Jici do you guys have any idea of how to achieve this?

I just want to collapse the first input, and all the inputs next to first one needs to go with the collapse.

I´m trying this approach but no way to make it work: Collapsable Width - #3 by

Thanks a lot.


Update this bad boy to be “position-relative” and remove the addClass portion. :wink:

What you have now:

What it should be:

Thanks but it´s not working: mynewtestapp | Bubble Editor

I´ve just tried “position-relative” but nothing.

I´m using the “Run javascript” option. you can edit the app if you feel it would be easier.

Thanks a lot man.

Try adding width 0 like in the image below

Screen Shot 2021-03-16 at 10.58.33 AM

I think you´ve done.

Now it hides the two inputs, next to the one that should hide.

Fixed - It ain’t pretty… but she works. lol…

Honestly I try not to use this in any of my apps. If you resize the window drastically, Bubble will recalculate everything and screw it all up.

And if you don´t mind. What do you use in your apps?

Is there any other way?

That’s what I use when I absolutely have to.

I haven’t found any other ways :frowning:

99% of the time, I re-work my design to not have to do this. Let’s all hope the new Responsive Engine will make this a little more friendly for the future.

1 Like

Can this be a bit trickier?

I´ve created an example below.

I want to hide the “input A_hide” which is in the middle, resize the first input depending on if “input A_hide” it´s hidden, make the first input wider and move the “input B” next to “input C”.

Yikes, yeah that seems tricky!! lol.

1 Like

Hehe you don´t even know how much for me :sweat_smile:

Do you mind taking a look and pointing me into the right direction?

Thanks a lot

Unfortunately can’t put too much more time into it :frowning: Maybe another person can jump in and help out!

1 Like

Thanks anyway :slight_smile:. You´ve been super helpful!