# Collapse Group Width When Element(Group) is hidden

**URL:** <https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159>\
**Category:** Questions\
**Created:** [March 29, 2019, 4:15pm UTC](https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159 "2019-03-29T16:15:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vansokip](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vansokip/32/55149_2.png) [@vansokip](https://forum.bubble.io/u/vansokip)\
**Post date:** [March 29, 2019, 4:15pm UTC](https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159/1 "2019-03-29T16:15:07Z")

</div>

Is it possible to collapse the width of an element when hidden?  
I want to collapse the small groups on the left side of each cell so they do not leave gaps as shown in the screenshot.

 ![Add%20Employees](https://us1.discourse-cdn.com/bubble/original/3X/c/d/cdc61e3c9e2113a874ad99af3dd82e691b3e7862.png)  
Currently, bubble only allows collapsing elements vertically. Is there a way of achieving this?

---

<div class="post-metadata">

**Author:** ![j.poolman](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j.poolman/32/13227_2.png) [@j.poolman](https://forum.bubble.io/u/j.poolman)\
**Post date:** [April 11, 2019, 9:18am UTC](https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159/2 "2019-04-11T09:18:07Z")

</div>

If you create a hide rule in responsive mode it will collapse horizontal. Unfortunately not as a condition. So it will only hide if the screen gets smaller/bigger. This function is a must have!

---

<div class="post-metadata">

**Author:** ![vansokip](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vansokip/32/55149_2.png) [@vansokip](https://forum.bubble.io/u/vansokip)\
**Post date:** [April 11, 2019, 9:26am UTC](https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159/3 "2019-04-11T09:26:26Z")

</div>

I’m using conditions unfortunately.

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [April 11, 2019, 12:41pm UTC](https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159/4 "2019-04-11T12:41:09Z")

</div>

Maybe try this:

> [@How to hide whitespace left by hidden images in group?](http://forum.bubble.io/t/how-to-hide-whitespace-left-by-hidden-images-in-group/19368):
>
> I dont want any empty spaces caused by a hidden image in group… I want all images/ icons to be equally distanced from each other in a group. How can this be achieved? By CSS , JS or in settings? Ex: Currently my group looks like this: OOOOO OOOO OOO \<-- Some images are hidden due to conditions that have been met I want OOOOOOOOOOO \<-- No spaces

---

<div class="post-metadata">

**Author:** ![dmitry.vernikovsky](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/dmitry.vernikovsky/32/95692_2.png) [@dmitry.vernikovsky](https://forum.bubble.io/u/dmitry.vernikovsky)\
**Post date:** [May 21, 2021, 12:59pm UTC](https://forum.bubble.io/t/collapse-group-width-when-element-group-is-hidden/53159/5 "2021-05-21T12:59:09Z")

</div>

Hi  
You can use JS.

1. Use HTML element on your page

2. Set ID Attribute for groups ( for example you have group AAAA and group BB in one line and group Container for AAAA, BB )

3. Insert JS in HTML which make group AAAA wider when BB is Hide

But add script tag in HTML