Hello everyone! I’m very much new to bubble, hence this might be a newbie question, but I’ve tried everything I and chatgpt could think off, and nothing worked:
https://sanni.chat is the url of my app I need help with. After sign up (you can use any made up email if you wish) you’ll notice, how the chat area is just slightly too big in height, you have to scroll down to get the whole page, see attached image:
I need the html chat widget to adjust to the screen size like it does now, but there should be no scroll bar, the html element should not take up the whole screen size, but leave room for the header and footer area. In the end, we want there to be no scrolling necessary at all (other than inside the chatbot), the app should always take up the whole screen. See here how I wished it would look:
(Tried to fix this myself for quite some time, even tried my luck with a plugin that offers css tags and tried stuff like calc(100vh - 200px) which always just kinda worked, but also messed up the whole design so the chat wouldnt be accessible anymore…)
My problem isn’t with the scrolling itself, just with the height of the embedded html chat element. It should always be exactly the size of the screen, minus size of header and footer.
I did come a bit closer to the solution with a css plugin.
But when I try to adjust the css directly this way, there’s still the problem that the bottom part of the chat widget isn’t showing up anymore, and I can’t interact with the bot:
Update: I got pretty close now after hours of further tinkering. I set the htmls embed as iframe. Now the only problem is that when I hide the scrollbar of the iframe with css I get just a few pixel, maybe 3 on top and on bottom that get cut off.
Basically if I set it to overflow: hidden; I get the cut off, when I do overflow: visible; I get the ugly scroll bar.
I want the scroll bar to be hidden, but the full content still be visible, without any pixels cut off…
