Responsiveness of the height of a group/element

Need help Responsiveness
1

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

groups
groups1180Ɨ652 30.4 KB

preview
preview1366Ɨ668 6.11 KB

2

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.

3

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.

4

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

5

@cmarchan any idea much appreciated

6

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
7

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
8

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.

whatsapp_ui
whatsapp_ui2592Ɨ768 111 KB

9

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
10

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
11

ohh, that was too much. thanks a looot!

1 Like
12

@maze thanks a lot

13

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

2 Likes
14

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

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

1 Like
16

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: