Collapsing input width inside a RG

[ryanck]

Hello,

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.

[agilityinusa]

Hi,
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

[ryanck]

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:

Bubble Editor - mynewtestapp

Do you know how to achieve it?

[ryanck]

I´ve found this code by @w.fly,

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>

[ryanck]

@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 w.fly

Thanks a lot.

[w.fly]

@ryanck

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

What you have now:

What it should be:

[ryanck]

Thanks @w.fly but it´s not working: mynewtestapp | Bubble Editor

[ryanck]

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

I´m using the “Run javascript” option.

[ryanck]

@w.fly you can edit the app if you feel it would be easier.

Thanks a lot man.

[w.fly]

Try adding width 0 like in the image below

[ryanck]

I think you´ve done.

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

[w.fly]

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.

[ryanck]

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

Is there any other way?

[w.fly]

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

I haven’t found any other ways

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.

[ryanck]

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”.

[w.fly]

Yikes, yeah that seems tricky!! lol.

[ryanck]

Hehe you don´t even know how much for me

[ryanck]

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

Thanks a lot @w.fly

[w.fly]

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

[ryanck]

Thanks anyway . You´ve been super helpful!