Responsive Height for Hybrid Mobile App

Wow thank you I have not seen a solution like this yet. I’m excited to try it but I have a few questions. Do I need to put any html codes.Also when you say wrap it inside a floating group. Wrap the Map inside a floating group and then wrap both of those inside of another floating group or just a regular group? Sorry I am relatively new to bubble. Thanks for the support though! @nocodeventure

A floating group has responsive height. When you place it inside a group you can set it to be fixed to the top and bottom. If you don’t place it inside a group it will attach to top and bottom of the entire page.

I am sorry for how non-technical I am but when you say attach the floating group to the top and bottom, do you mean both? also the floating group itself is responsive but the map that I attached to the floating group it not responsive. @nocodeventure

Floating Group Elements cannot live inside other Elements – you can only have them live on the page, but you can “anchor” them to an Element above it, below it, or both.

Here’s an example showing the “Vertically float relative to” set to ‘Both’.

image

The black colored side menu in the video below is a floating group that is anchored to the top and bottom of the page.

To make the “Settings” icon float I’m actually using CSS to float it (it’s a Group Element) within the Floating Group. This is accomplished by giving the Group Element an ID attribute, then adding some CSS using an On Page Load step in the Workflow page.

image

To add CSS in workflow, you need to install the CSS Tools plugin, then add a “CSS Tool” element to your page". This is really only added so you can add the workflow action to add custom CSS.

1 Like

Wow this cleared up a lot of things I actually just fell into CSSTools. I understand a lot of this but my main issue is do I just copy what your put into your ‘Add Custom Style to Head CSSTools B’ and switch #settings to example my map whose ID is map? Would that then make my map responsive if it is within a floating group? @Kfawcett
btw I am very thankful for your response!!

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.

1 Like

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 @nocodeventure!!
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();
});

2 Likes

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.