Responsiveness of the height of a group/element

I have the following two groups (gray and pink) that are themselves grouped together (group B).

My aim is to make sure that, independent of the size of the screen, the pink group remains always at the bottom of the page. I.e. the gray group can decrease in height in order to ensure that the pink group is at the bottom of the page (basically the page should not have a vertical scroll bar).

When I preview the page, this is what I get. So, the pink group does not adapt to the height of the screen and I need to scroll down to fully see it. I tried to change the type of the pink group to “floating group” but that did not make any difference.

How can I achieve the desired outcome? @Andrew.Vernon do you have any idea on this?

thanks


Hey there,

Thanks for the post! Interesting question.

I would also think a floating group would be the right solution here, but you’ll want to make sure that it’s set to float relative to the bottom and you might want to put it outside of the grey group for the effect you’re looking to produce.

Give that a try and don’t hesitate to reach out to us directly at Support@Bubble.io if this continues to give you trouble.

hey @Andrew.Vernon thanks for the reply.

I contacted the bubble support team, but they said that “At the moment, there’s no way to make a group’s height adjust dynamically to the height of your page. There may be a code solution, but our team isn’t able to support that directly.”.

So, I will leave this question here if any coder knows how to deal with it. :slight_smile: I am writing it again:


I have the following two simple groups: group gray and group pink. Group pink is type “floating group” while gray group is of type “group”. My objective is to:

  1. stick the pink group to the bottom, and make sure it does not change height when screen size changes.

  2. make sure that the gray group is always of height = screen_height - pink_group_height. Basically, I want its height to adapt to the height of the screen. I.e. I want no scroll bar to appear at the right.

I manage to achieve point 1 by grouping the gray group in another group and moving the pink group slightly down, but I cannot fix the second point.

@J805 what do you think about this case. do you have any idea how it could be solved? thanks

@cmarchan any idea much appreciated

Hey @sensei01 :wave:

I can try to see what I can do to help. Sometimes it’s just adjusting how we are viewing something to make it work.

Why are you trying to resize the grey group? What is your ultimate goal? Do you have an image of what you are trying to achieve? This could help us give you a better solution.

I go over one type of solution here in the NoCodeMinute - eLearning Hub (Members Only): One-Page App where it even has a floating group as a footer at the bottom. It adjusts to each ‘page’ and doesn’t scroll unless I want to make it scroll by having more content. I think this might be what you need, but if you can answer the questions above, it will help me figure out if I understand what you are trying to do.

There is code to do it, I just don’t know if this is really what you need or not. It might just cause more problems instead of actually doing what you want it to do.

2 Likes

You can use the classify plugin to do it.

  1. List item Install the plugin & enable ID’s (Settings - General - Expose the option to add an ID)

  2. List item Set the ID of the grey element to: {addClass: “grey”}

  3. List item Set the ID of the pink element to: {addClass: “pink”}

  4. List item Then create a html element and paste the following in:

<style>
.grey {
  height: 100vh !important;
}

.pink {
  position: fixed !important;
  top: calc(100vh - 50px) !important;
} 
</style>

Attention: You need to adjust the “50px” to the height of your pink element - I just used 50px as an example.

That should do the trick. However the usability will depend on the elements you are going to put inside these groups.

Hope that helps.

1 Like

wow @J805 thanks for the prompt reply.

My aim is to build something similar to the WhatsApp desktop app. As you can below, the top and bottom bar do not change height, whatever the height of the screen is. Thus, it is only the conversation section that decreases in height. Moreover, the top and bottom bars do not change place.

Ahhh, ok. Let me try to give you an example. I don’t think code would be good here. Let me see if I can do an example for you to look at.

2 Likes

Well, this is the idea. I don’t have time to tweak it to look perfect. But I think you can get the idea from it.

Here is the editor: Test805421 | Bubble Editor

Preview: https://test805421.bubbleapps.io/version-test/chat_bubbles_full_screen?debug_mode=true

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials

ohh, that was too much. thanks a looot!

1 Like

@maze thanks a lot

He is right - my example solves a different, but similar problem. It is better to us @J805 's solution.

2 Likes

@J805 one extra question if you have time: what is the “rg2” in the RepeatingGroupID of the RG | Reverse at the top referring to? I cannot see it anywhere else in the page

thanks

1 Like

That was just the default setting, I took it out so it won’t confuse anyone else. :blush:

1 Like

I know I’m a bit late to the party, but here’s a new plugin that allows dynamically adjust a groups height according to multiple reference points like page’s height or another element’s/group’s height: