# Popup not stretching to fit reusable content size

**URL:** <https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053>\
**Category:** Responsiveness\
**Created:** [December 20, 2021, 12:28pm UTC](https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053 "2021-12-20T12:28:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kooxda](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@kooxda](https://forum.bubble.io/u/kooxda)\
**Post date:** [December 20, 2021, 12:28pm UTC](https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053/1 "2021-12-20T12:28:49Z")

</div>

Hi All,  
I am trying to make a popup show a reusable content that has a bigger size than the popup, but when it shows the reusable content, the popup does not stretch vertically to fit all the content (as a regular group would do…) Any ideas?

This is what the configuration looks like:

- _“Element - formación video”_ is a reusable element of dimensions 1130x800 that needs to be embedded inside the _“Popup Detalle Formacion”_  
 ![Captura de pantalla 2021-12-20 a las 13.21.07](https://us1.discourse-cdn.com/bubble/original/3X/1/d/1d80112442e226086a25ed176e85dfe51fa191e4.jpeg)

As you can see, the popup mantains a constant height of 550 px and does not strecht.

 ![Captura de pantalla 2021-12-20 a las 13.20.15](https://us1.discourse-cdn.com/bubble/original/3X/a/f/af53cc0ae0be548d5763583fed11e60b7e3d7244.jpeg)

Thanks a lot for all the help!!

---

<div class="post-metadata">

**Author:** ![ri\_scc\_94](https://avatars.discourse-cdn.com/v4/letter/r/41988e/32.png) [@ri\_scc\_94](https://forum.bubble.io/u/ri_scc_94)\
**Post date:** [December 20, 2021, 2:40pm UTC](https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053/2 "2021-12-20T14:40:54Z")

</div>

I have this problem too… So I made the popup bigger than the reusable element.

The only problem is that the popup won’t collapse its height, no matter if the reusable has a collapse height in it.

Result: I have a popup with A LOT of blank space hahah

---

<div class="post-metadata">

**Author:** ![kooxda](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@kooxda](https://forum.bubble.io/u/kooxda)\
**Post date:** [December 20, 2021, 4:01pm UTC](https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053/3 "2021-12-20T16:01:00Z")

</div>

@ri_scc_94 Yes!! Just what I am trying to avoid: having a lot of whitespace on the popup…  
If you find a solution let me know! I will do the same here 😉

---

<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:54pm UTC](https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053/4 "2023-06-14T16:54:10Z")

</div>

My solution here that should work for this:

> [@Resuable Popup not fitting to content width](http://forum.bubble.io/t/resuable-popup-not-fitting-to-content-width/215843/9):
>
> 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] Next, go to the popup and set the Background style and Shadow style to “None”. [image] [image] That’s it!

---

<div class="post-metadata">

**Author:** ![2706mason](https://avatars.discourse-cdn.com/v4/letter/2/7993a0/32.png) [@2706mason](https://forum.bubble.io/u/2706mason)\
**Post date:** [March 5, 2025, 9:54pm UTC](https://forum.bubble.io/t/popup-not-stretching-to-fit-reusable-content-size/183053/5 "2025-03-05T21:54:06Z")

</div>

The proper solution is to:

1. Assign a unique ID to your pop-up element.
2. Add an HTML element to your page.
3. In the HTML element, add the following:

```auto
<style>

#unique_id {
   height: fit-content !important;
}

</style>

```