Floating Group Full Height Responsive Engine [Help Needed]

Hi everyone,

I am currently facing difficulty in creating a chat “window” (floating group) that meets the following requirements:

  • A small button will be present at the bottom right of all pages, which upon clicking will open the chat overlay.
  • Once clicked, a popup group should appear and occupy the full height and width of the screen in mobile screens.
  • In desktop screens, the popup group should not be higher than 800px and wider than 400px.

The chat “popup” (floating group) should include the following:

  • A “Messages” header.
  • A list of all ongoing chats (repeating group that may be large enough to require a scroll bar).
  • A button to create a new chat at the bottom.

I have tried numerous combinations of using 100% height, fit height to content, multiple groups, HTML styling groups to 100vh, using columns, aligning to the parent, etc. To be honest, I have lost track of the number of combinations I have tried, and everything seems confusing at this point. Some of the combinations work partially, such as working on desktop screens but not on mobile screens, or appearing too large or too small.

For testing purposes, I am using the project linked below: Bubble | No-code apps

I would appreciate any help or comments in solving this issue. Thank you.

[Edit: Ok, I’ve just realized that my page was set with Fixed size, so this was messing up my tests… I’m still trying to figure out how to do it, but one step closer]

Hey @charles_bubble
Can I have editor access to this test page?

Sure, go ahead, thanks! Feel free to play around.

I’m trying two different strategies:

  • The right side is working fine using “align to parent”: It is the only way I was able to make it work. =/
  • The left side I’m not able to make it strech to full height using columns.

Tomorrow I’ll try again and keep this thread updated for further reference. Thanks once again!

Hello
Is the left button redundant? I think you created it for testing?

Now, floating groups appear to be working correctly.
The page is very cluttered and the elements are conceptual, I can’t properly understand your challenge and your intention?

Sorry for not explaining myself clearly. Let me provide more context and ask a straightforward question:

To give an example, I’m attempting to create a chat window that looks like this:

There would be a button on the right or left corner of the screen. When clicked, a floating group containing the chat messages will pop up.

My problem is adjusting the size of the floating group correctly when the button is clicked. The floating group should:

  • Have a maximum height of 800px and a maximum width of 400px on bigger screens (or full screen on mobiles).
  • Include a scroll bar in the middle container if necessary.

I’ve simplified the test page to show the issue:

  • The floating group is almost perfectly sized. It will fit the screen of mobile devices and remain at 400x800 on desktops.
  • However, it is overlaying the page’s content, making parts of the page inaccessible when it should be shrunk.

My question is: Is there a way to make the floating group (1) fit the height and width of buttom before clicking the button and (2) expand to its limit (full-screen or 400x800) when the content container is open?

Any suggestions for how to make this work? Thanks in advance!

1 Like

Do you want some thing like this?

I created the main frame in a new page.

Full Height Floating (bubbleapps.io)

1 Like

You got it!

I actually found a solution that works without covering up the screen.

Here’s what I did:

  • Shrank the floating group to the same size as the button.
  • Added a conditional to set the max height/width to 400x800 when the content is visible (I toggled the content).

image

I could also use State to achieve this, especially if planning on using it as a reusable element and setting the size on the page that will host it.

Hope that works! Let me know if you have another/better way of doing it.

Thanks for the support/time/patience!

1 Like

Wowww, I replied almost the same time! Your solution seems to be much more neat!
Two elements?! Why not! Amazing, hahaha…
Thanks once again!!

1 Like

you’re welcome. If you have any questions, I am here to help
Do not forget to check the solution.

1 Like