A point of clarification, “responsive” typically applies to width, and what elements show at different widths through “breakpoints”.
Most websites typically use percentages for height, but Bubble does not allow us to set percentages for elements, only pixels, which makes some fairly simple designs more complicated to achieve in Bubble.
See this post for more details if you’re interested in history.
I am sorry maybe I am not relaying what my issue is. I understand that the floating group element dynamically changes height/width my issue is I have a map within my app that does not a responsive height. Even though I put it within a floating group and set it to vertically float to both. Also I looked at the link you proved for the groupfocus scrollable. Again I am not technical at all. But how can I use that for my cap of simply making the height of my map dynamic to the screen that is fitting it? Is there a way maybe to figure out the screens height in pixels and then apply is using CSS change element size?
Thank you again for your help!
So The second screenshot says alot of my problem. The map is 320x640. I have a Galaxy s9+ which has a pixel height that is longer then 640. But the grey color you see below is the floating group that I attached the map inside of. The floating group seems to know the height of my screen but the map does not. I am just having a hard time getting this concept down. I am adding the map as a plugin I believe. It the google maps that bubble provides I believe.
Update…I got it! Wow you this code of Run js on page load worked!
Thank you @Kfawcett and @Codeables!!
now I just have to figure out how to make it fit in-between my header and footer! as in this picture. I am more than thankful this has been about 2 weeks or searching for an answer and I finally got it thanks to y’all!!
Hmm thank you for this. But again I have no technical background is JS. Do I simply switch the top in topOfTarger = target.position().->top<- to my pixel length? For example my header and footer are both 60pixels in height and this will be the basis of my app so I will be able to copy this to all my elements. What would the code look like?
I just had to change the line
var navHeight = h - 120; before ‘120’ was ‘px’ so I then changed it to my required height!
Nice work @Kfawcett! I was wondering how you managed to only show the scrollbar when a group in your RG is hovered? I’ve figured out how to do it when the actual position of the scrollbar is hovered but not when a group is. Any idea?
@kfawcett Hello again, unfortunately I’ve ran into another responsive height issue.
So lets say I have responsively set my map but I then have a element within my map for example a text box. how do I get the text box to have responsive height as well. How do I make the text box relative to the map.
In the editor I actually placed the text box on the bottom of my screen but when I look at it on my phone it does not actually go to the bottom of the screen thus not responsive.
I put the input in the same floating group and applied the previous java script and it had the same results. Do I need to apply the java script to the input element itself or just the floating group its within?