# Resuable Popup not fitting to content width

**URL:** <https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843>\
**Category:** Responsiveness\
**Created:** [July 17, 2022, 2:40pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843 "2022-07-17T14:40:41Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Louis-1832](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/louis-1832/32/63601_2.png) [@Louis-1832](https://forum.bubble.io/u/Louis-1832)\
**Post date:** [July 17, 2022, 2:40pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/1 "2022-07-17T14:40:41Z")

</div>

Hi,  
Is anybody having problems with “fit width to content” with the new responsive engine?

I’ve ticked all the elements inside my reusable popup “collapse when hidden”. In the example below elements have maximum widths set less than the popup’s.

But the popup is not fitting to the width of the elements inside the popup.

I don’t have this problem with the height.

Any ideas?

 ![logout](https://us1.discourse-cdn.com/bubble/original/3X/7/d/7da09540771e11962b43496aebbafc84d86fe08f.png)  
Here is the reusable popup in the index page of the editor:

 ![popUpReusableB](https://us1.discourse-cdn.com/bubble/original/3X/9/2/92dc398c39173fdba7695616402119661fce9dae.png)

Here is the reusable popup in the reusable element editor:

 ![logOutA](https://us1.discourse-cdn.com/bubble/original/3X/0/c/0c1d48345d5c4301c58a687057d682b1240b5893.png)

---

<div class="post-metadata">

**Author:** ![grayson.keaton](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@grayson.keaton](https://forum.bubble.io/u/grayson.keaton)\
**Post date:** [October 26, 2022, 4:44pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/2 "2022-10-26T16:44:43Z")

</div>

Having the same problem… Did you ever find a solution?

---

<div class="post-metadata">

**Author:** ![linked](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@linked](https://forum.bubble.io/u/linked)\
**Post date:** [October 28, 2022, 8:17pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/3 "2022-10-28T20:17:35Z")

</div>

Having the same problem in my app. If I give it a fixed width or a max width, those apply just fine; but the fit-to-width (and, more problematically, the fit-to-content-height) features seem to be completely broken.

Any tips for getting my popups to grow instead of just scrolling internally?

---

<div class="post-metadata">

**Author:** ![heythere](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/heythere/32/157295_2.png) [@heythere](https://forum.bubble.io/u/heythere)\
**Post date:** [October 31, 2022, 9:23pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/4 "2022-10-31T21:23:16Z")

</div>

Same issue!

---

<div class="post-metadata">

**Author:** ![mlw18064](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@mlw18064](https://forum.bubble.io/u/mlw18064)\
**Post date:** [November 19, 2022, 7:56pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/5 "2022-11-19T19:56:00Z")

</div>

Same issue

---

<div class="post-metadata">

**Author:** ![Naiko](https://avatars.discourse-cdn.com/v4/letter/n/41988e/32.png) [@Naiko](https://forum.bubble.io/u/Naiko)\
**Post date:** [March 23, 2023, 1:22pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/6 "2023-03-23T13:22:15Z")

</div>

Same issue…

---

<div class="post-metadata">

**Author:** ![paul29](https://avatars.discourse-cdn.com/v4/letter/p/5f8ce5/32.png) [@paul29](https://forum.bubble.io/u/paul29)\
**Post date:** [March 24, 2023, 5:06am UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/7 "2023-03-24T05:06:17Z")

</div>

Same issue here @josh, can you provide any insight here?

---

<div class="post-metadata">

**Author:** ![stephanie4](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stephanie4](https://forum.bubble.io/u/stephanie4)\
**Post date:** [April 11, 2023, 5:00pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/8 "2023-04-11T17:00:23Z")

</div>

Is there going to be an answer to this? I need a reusable element to be responsive to the height of the page I put it on, without having to change anything. @josh @superforge Hoping I tagged the right people.

---

<div class="post-metadata">

**Author:** ![bradey](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bradey/32/177425_2.png) [@bradey](https://forum.bubble.io/u/bradey)\
**Post date:** [June 14, 2023, 4:48pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/9 "2023-06-14T16:48:33Z")

</div>

I had the same issue and found a great way to handle this! After so much time trying different methods, the solution was actually simple to implement.

Ensure the first level under your Popup is a Group (preferably set to Column). You will set this group’s min. width, height, fit to content, background color, etc. as needed.

![image](https://us1.discourse-cdn.com/bubble/original/3X/a/1/a16fbcd61c0f14f9d28f5d7a037101c0610d60e5.png)

**Next, go to the popup and set the Background style and Shadow style to “None”.**

![image](https://us1.discourse-cdn.com/bubble/original/3X/1/d/1dde629cd91084587ba601b939b804d77adf8782.png)  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/5/55d48c14bfdca329355fe57b109b74f674dedd02.png)

That’s it!

---

<div class="post-metadata">

**Author:** ![christo1](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@christo1](https://forum.bubble.io/u/christo1)\
**Post date:** [July 26, 2023, 10:00am UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/10 "2023-07-26T10:00:25Z")

</div>

Works perfectly, thank you for taking the time to share this!

---

<div class="post-metadata">

**Author:** ![purpleteam](https://avatars.discourse-cdn.com/v4/letter/p/977dab/32.png) [@purpleteam](https://forum.bubble.io/u/purpleteam)\
**Post date:** [August 6, 2023, 1:15am UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/11 "2023-08-06T01:15:35Z")

</div>

No, it does not work. At least not “perfectly”.

The popup is still there at a greater width, just not visible to the user. This means if the user clicks on the supposedly transparent area which is inside the popup, the popup does _not_ close, because it is still there.

This can be worked around by introducing a click event which closes the popup, but then the cursor is affected while in the popup area (it becomes the “hand” click cursor).

This is a usability issue and a bug, the proposed solution is subpar.

---

<div class="post-metadata">

**Author:** ![bradey](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bradey/32/177425_2.png) [@bradey](https://forum.bubble.io/u/bradey)\
**Post date:** [August 8, 2023, 4:44pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/12 "2023-08-08T16:44:01Z")

</div>

Do you have a better solution to share? Correct, it is not a “solution” as the issue is with Bubble. Calling it a workaround would be more appropriate. I hadn’t seen any other steps that would work, and although yes it is invisible to the user so click to the left or right doesn’t exit, it is better than nothing.

---

<div class="post-metadata">

**Author:** ![JR\_Asp](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@JR\_Asp](https://forum.bubble.io/u/JR_Asp)\
**Post date:** [July 31, 2024, 7:59am UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/13 "2024-07-31T07:59:46Z")

</div>

I’m still seeing this issue that fit height to content ticked on a reusable element, just doesn’t consider the content that is present on the reusable element page …

---

<div class="post-metadata">

**Author:** ![stephenrice1](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@stephenrice1](https://forum.bubble.io/u/stephenrice1)\
**Post date:** [August 11, 2024, 5:52pm UTC](https://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/14 "2024-08-11T17:52:57Z")

</div>

Thanks for sharing this fix @bradey. I’ve been struggling with this for about an hour!
