Collapse width on group with conditional hiding

Hi,

Collapsing the width of a group is an essential feature for complex forms and views. I give a few examples:

Creating a tab menu with 4-10 tabs. The number of tabs are depending on settings in the admin which a user can change. When I create a horizontal tab menu, the tab menu will get empty spaces when a user unchecks tabs in the setting.

A complex form where I need to work with a repeating group with horizontal positioned fields. Here the user can uncheck certain fields in the settings. Now the form has empty spaces in the row.

As long as this feature is not available, can I do something with css to manipulate?

5 Likes

Bump. This would be great for sidebars.

This would also be helpful for allowing end users to hide columns from a table (repeating group)

+1!
I would love it as well

Does anyone has a workaround for now?

@j.poolman, @supernaturally, @stephencharles, @LouisJ

Here you go guys, chipped you a bit off of a plugin i have… I will add more as i get the time.

I published it like 2 minutes ago so it might not be there right this second but it should be there soon.

1 Like

Wowww Jarrad. Thank you so much! So I have installed it and pickep up a css element. But what exactly do I need to do with it? Just put a group or any element in it and tell the csst tool element to act when hidden?

It depends what your aiming to do, if you wanted to say squish a repeating group you could:

  • drop a CSS element on the page. (its invisible & set to 0% with and height when running so dont worry about adjusting the tool itself).

  • go to your apps settings and check the expose element id’s.

  • give the repeating group an id.

  • set a work group, do every 5 seconds - change to 0.01 seconds and make the action change element height/width.

  • make the workflow only when finished = no (once the code detects the element has bowed to its master it stops acting on it and changes to width or height change finished to stop the 0.01 sec. workflow.)

  • give the action the element id you gave to the element needing the change, set your height / width, and your done.

you can also use the custom css action. this will add a style to your header. it means you can give an id to an element, use a class, a portion of your document or even a mixture of them. here, give this a shot - place the following code into the custom CSS element and trigger it at on page load.

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

You should get something like this: (this is a blank page with only the grey shape and the repeating group from before) -

1 Like

Hi Jarrad,

Thanks for the explanation. I do not have time now but will try to test it tomorrow.

Hi Jarrad, I have just tested it on my sidemenu. So when the icon to minimize the menu is clicked I would like to hide the menu and then act the content group responsive, meaning it will take the space of the sidemenu. But what happens is that there is an empty space. The responsiveness does not act on it.

So am I right that your plugin does squeeze a certain element but all other elements around it does not act responsive on it?

so looking into this today it seems when we give an element an id we are really giving a box around the element an id. I have made some adjustments and also added a page orientation state that you can use to help in other areas too. I will push the update shortly.

Looking forward to it :grinning:

Adding my vote for this. I’ve got horizontal groups where each cell is a day. If the user has logged data for that day, then I’d like that day to disappear and the list of days to compress to remove the empty space. That’s how a vertical repeating group would work if I hid a group that covered an entire cell.

It would be nice if hiding something could collapse its width too.

Hi Jarrad, nice work on the plugin, should be very useful. Is the most recent version supposed to shrink the outer box too? Because I’m still getting what j.poolman described, the element shrinks but it doesn’t move responsive elements

Hello

Is this plugin still working please?
I followed all the steps with no results

Thanks for the help

Yanis

Yes, this plugin works. Why don’t you share screenshots of your setup and maybe someone can tell what’s not quite working correctly.

1 Like

thanks a lot for the feedback, i managed to get it work :wink:

1 Like

To biggyback off this thread, does the above plugin work on a horizontal repeating group? I’m having trouble adjusting the horizontal repeating group’s width depending on the number of records (i.e. columns)

Below are some screenshots with parameters and the result:




I would think there’s a viable solution here using the CSS Tools plugin. I haven’t done a whole lot with horizontal repeating groups and I don’t understand the exact details of the problem, but on the surface it seems viable.

I’d recommend trying the plugin and looking at the options it provides to see if you can come up with any solutions. The plugin is really powerful in that it exposes some options that feel like they’re missing from Bubble. It opens a number of new options directly, and a lot of creative combinations when combined with other Bubble features/techniques.

1 Like

There is a link that Jarrad posted in one of the threads that links to an editor and a demo of CSS Tools and it expands the width of an RGs cells. It can also extend the length. He posted a few links as examples for CSS Tool so keep searching if you don’t see it in the first example. It’s there somewhere and it works.