# Dynamically change the width of a group

**URL:** <https://forum.bubble.io/t/dynamically-change-the-width-of-a-group/294070>\
**Category:** Need help\
**Created:** [November 20, 2023, 3:40pm UTC](https://forum.bubble.io/t/dynamically-change-the-width-of-a-group/294070 "2023-11-20T15:40:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ken1](https://avatars.discourse-cdn.com/v4/letter/k/4491bb/32.png) [@ken1](https://forum.bubble.io/u/ken1)\
**Post date:** [November 20, 2023, 3:40pm UTC](https://forum.bubble.io/t/dynamically-change-the-width-of-a-group/294070/1 "2023-11-20T15:40:41Z")

</div>

I’d like to change the width of a group dynamically. I know there are plugins that do this, but I’ve tried all of the ones I can find and none of them actually see to work.

I’ve see some posts that suggest using CSS/Javascript to accomplish this.

Are there any tips on how to do this? I have a value with a range of 1 - 100. I just want the width to be at the max for the group when it’s 100 and at the min for the group when it’s 1. Unfortunately, I can only input numbers in a condition and not a dynamic expression.

I’d appreciate any help on this. Thank you!

---

<div class="post-metadata">

**Author:** ![nico.dicagno](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nico.dicagno/32/207961_2.png) [@nico.dicagno](https://forum.bubble.io/u/nico.dicagno)\
**Post date:** [November 21, 2023, 12:00am UTC](https://forum.bubble.io/t/dynamically-change-the-width-of-a-group/294070/2 "2023-11-21T00:00:21Z")

</div>

> [@ken1](#):
>
> I’ve see some posts that suggest using CSS/Javascript to accomplish this.

This is the way to go 🙂

Activate the ‘Expose the option to add an ID attribute to HTML elements’ on Settings \> General \> Advanced Options  
This will expose an ID attribute at the bottom of the Property Editor for every element.  
Give an name to the element you want to resize  
Use the HTML element, and use this snippet of code

```auto
<style>
    #elementID {
        width: DYNAMIC EXPRESSIONpx !important;
        height: DYNAMIC EXPRESSIONpx !important;
    }
</style>

```

Replace elementID with the name of the element in question.  
Replace the dynamic expression with Range\*Desired Max Width where Range goes from 0-1 and the max width is measured in pixels.

If the max width of the element is responsive to the page width, make sure that this is obeyed in the expression.  
What i personally like to do is to put the resizable element inside a group which resizes dynamically with the page, but always rapresents the Max Width of the element. Then the expression just simply becomes Range\*Parent Group’s width

---

<div class="post-metadata">

**Author:** ![ken1](https://avatars.discourse-cdn.com/v4/letter/k/4491bb/32.png) [@ken1](https://forum.bubble.io/u/ken1)\
**Post date:** [November 21, 2023, 10:46am UTC](https://forum.bubble.io/t/dynamically-change-the-width-of-a-group/294070/3 "2023-11-21T10:46:08Z")

</div>

Thank you. I’ll give it a try.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [January 29, 2024, 3:41pm UTC](https://forum.bubble.io/t/dynamically-change-the-width-of-a-group/294070/4 "2024-01-29T15:41:01Z")

</div>

Closed on January 29, 2024, 3:41pm UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.