Height responvie floating group? Chat Widget NEED HELP

[Orbit]

Hey guys,

Im trying to figure out how to get my floating group (reusable element) to be responsive in my app like intercom, see example below

Im building my own version of intercom (a chat widget to the right of the app) but i cant seem to wrap my head around how to get it to react like intercoms, i dont think it’s complicated i just cant wrap my head around it… been reading on the froum for the past hour but no success…

I made a demo editor that anyone can please help me out

Editor:

Bubble Editor - Responsive chat widget

Preview:

Bubble - Visual Programming

@adamhholmes i have been having a look at some of your posts around nav bars that are floating groups but since i dont want to to cover the full page when the window is not visable im not sure how ti tackle this…

Would love some help or feedback on this one

[boston85719]

you could use my plugin Dynamic Width and Height. It has several elements that can control dynamically the size of elements and a new element that is Popup Positioner that should work fine on a float group as well.

[Orbit]

Hey @boston85719, i actually had a look at this one but this should be possible to do natively in bubble pretty easily, no? or with at least some css? seem crazy that a plugin is needed for this function? i might be wrong… i dont understand the logic with floating groups and making them responsive to be honest…

[boston85719]

@Orbit

should be possible to do natively in bubble pretty easily, no?

Should be, yes, but is not from my experience. This is why I built the plugin for me to use and then made it available for others.

@Orbit

i might be wrong… i dont understand the logic with floating groups and making them responsive to be honest…

If you do not need it to be dynamic in height, native functionality can achieve it. That would mean it fits the entire screen or has some static margins applied. But if you want it to be responsive and dynamic you would need CSS or a plugin that does it. If you want it to be always X pixels from top and Y pixels from bottom, you can do with margins set on the floating group. If you want the margins from top and bottom and height to be dynamic, need CSS or plugin.

[Orbit]

@boston85719

If you do not need it to be dynamic in height, native functionality can achieve it. That would mean it fits the entire screen or has some static margins applied. But if you want it to be responsive and dynamic you would need CSS or a plugin that does it. If you want it to be always X pixels from top and Y pixels from bottom, you can do with margins set on the floating group. If you want the margins from top and bottom and height to be dynamic, need CSS or plugin.

I mean all i need it to do is collapse the main group to the height of the browser, i tried some css with ChatGPT but no luck…

[rjayaddimalik]

@Orbit

uys,

Orbit let me do it for you maybe in 15 to 20 minutes

[Orbit]

hey @rjayaddimalik, thanks! I’ll will wait, the editor is above, big thanks

[boston85719]

@Orbit

I mean all i need it to do is collapse the main group to the height of the browser, i tried some css with ChatGPT but no luck…

In bubble that is 100% on min height setting. Fills the entire screen.

[Orbit]

Yes i gree that was what i tought as well.. but if you check the editor it still does not work? its very strange

[rjayaddimalik]

Hey Can you please take a look at chat-page.

[carlovsk.edits]

Hey! How are you doing? Hope everything’s good!

I built something similar once.

Basically, I had a main Floating Group that served as the chat widget itself.

Inside it, I placed two containers, one for the closed widget and another for the open widget.

When you click the closed widget, it shows the open widget container, which has a max height defined to keep it responsive.

The main floating group is placed on the page where you want the widget to appear, and its width/height are controlled through conditionals, depending on whether the widget is open or closed, and also adjusting for the user’s page width.

For example:
Closed:

Opened:

I also made both the main floating group and the widget reusable elements, which made maintenance and flexibility much easier.

[Orbit]

hey @carlovsk.edits thanks! But will it adjust to page height? like my screnshots

[rjayaddimalik]

I think you are looking for something like this.

[rpetribu]

I didn’t understand…

This is not working?

[Orbit]

No sadly, its cutting off the element like i said, it’s not adjusting height

[Orbit]

Hey @rpetribu no i have not gotten that to work either sadly? And will that not permanently cover that part of the page from bottom to top even if the widget is closed?

[rpetribu]

Its hard to help with other undoing everything I fix in the editor

[Orbit]

Yeah lol i noticed that as well… if you dont mind creating your own editor version and sharing it as just view? would appreciate it a lot

[rjayaddimalik]

Here are 3 different screen dimensions, what else is still left Orbit

[carlovsk.edits]

@Orbit

hey @carlovsk.edits thanks! But will it adjust to page height? like my screenshots

If you want to adjust it based on the page height, you can create a CSS rule where you grab the page’s height and apply it to the widget using the element’s ID.

The code would look something like this:

<style>
  /* Example: height = page height - 120px */
  #widget_chat {
    height: calc( YOURPAGE's height px - 120px );
  }
</style>