Forum Documentation Showcase Pricing Learn more

Responsive Height for Hybrid Mobile App

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.

So, your options to make something “height flexible” is to use the Floating Group element with “Vertically float relative to” set to ‘Both’ or use javascript in workflow to resize the element(s).

Futher reading: this post discusses how to dynamically change an elements height/width through javascript.

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!

If you share your app with us, or provide screenshots, it may help us help you.

How are you adding a map? Is it in an HTML element or a plugin?

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!!


function resize() {
var h = window.innerHeight;
var navHeight = h + ‘px’;
$(’#left-nav’).css({‘height’:navHeight, ‘overflow-y’:‘auto’});
}

resize();

$(window).resize(function() {
resize();
});

Take a look at the stuff around “top of target” in this code, and the posts below it. Basically you need to account for the height of your header, and possibly footer too.

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?

UPDATE!
I just had to change the line
var navHeight = h - 120; before ‘120’ was ‘px’ so I then changed it to my required height!

Did you attach this code to the the map?

Yes I did.

1 Like

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?

I’m setting an ID attribute on the Floating Groups, then using a “When page is loaded” step to add some CSS.

#fg-navigation, #fg-preview, #fg-view, #gf-view-email
{
 overflow-x: hidden;
 overflow-y: hidden !important;
}
#gf-view-email:hover, #fg-navigation:hover, #fg-preview:hover, #fg-view:hover
{
 overflow-x: hidden;
 overflow-y: auto !important;
}
#fg-navigation::-webkit-scrollbar-thumb, #fg-preview::-webkit-scrollbar-thumb, #fg-view::-webkit-scrollbar-thumb, #gf-view-email::-webkit-scrollbar-thumb 
{
 background: #bdbdbd;
}
#fg-navigation::-webkit-scrollbar, #fg-preview::-webkit-scrollbar, #fg-view::-webkit-scrollbar, #gf-view-email::-webkit-scrollbar
{
width: 8px;
}
#fg-navigation::-webkit-scrollbar-button, #fg-preview::-webkit-scrollbar-button, #fg-view::-webkit-scrollbar-button, #gf-view-email::-webkit-scrollbar-button
{
  height: 10px;
}
1 Like

#Lifesaver

@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.

Thanks again for the help!

Have you tried putting the text field in a Floating Group set to bottom?

Well yes the tabs at the bottom are a floating group set to the bottom, but I want the text to be relative to wherever I put it in the editor. As the example below. This is what It looks like in my

Also both the map and the text input are both in a floating group that is set to both top and bottom. Thus how I got the map to be responsive.
editor.

If you want it to be “relative” to anything, you’re going to put the input into a floating group, as well.

Hmm maybe I am not understanding something. The input text is within the floating group as is the
map. Is this what you mean?

troubleshoot%20element%20tree%201

Have you tried putting the “input” in its own floating group?

Otherwise, I think you may need to use javascript to determine the bottom and place the input, similar to what you did with the header and footer.

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?

Try putting it in its own floating group, not inside the other floating group.