Setting a group to be % of viewport height dynamically

[venddy]

Way late - but the approach in this video was perfect for what I needed: http://forum.bubble.io/t/floating-map-full-height-of-viewport-until-footer/81925/2?u=venddy

[boston85719]

In my opinion best approach to this is to install the classify plugin and use CSS

After installing classify plugin you would add classes to the id attribute of the element you want to target

then place an HTML element onto the page and put the styling required

The example above is full screen

if wanted half height would do 50vh

if wanted half width would do 50vw

the benefit of this approach is that you have even more control through CSS of the elements size as you could also calculate based on other elements…an idea is I have a header of 100px at top of screen so my ‘full height element’ should be full screen height less the 100px taken up by the header.

Another benefit is that you can then start to control all elements, something I don’t believe the hero sizing with toolbox plugin allows for since that just gives 100% all the time with no granular control

Using CSS also doesn’t require a workflow action, so no timing issues to deal with. Plus you can use conditionals to change the CSS or change the Class of the element, something I’ve employed for fully responsive designs on mobile that consider the orientation of the device in real time as the device is rotated.

[jeremias.steinmann]

@boston85719

In my opinion best approach to this is to install the classify plugin and use CSS

I agree, that definitely seems to be the best solution. Thank you!

[brian1]

3 years (or more later) I 100% support the classify-based solution. It didn’t exist when I first came up with this!

[jeremias.steinmann]

… I just wonder how to get rid of the ugly white edge when the background is being blurred by a popup… but this topic probably belongs elsewhere…

[manuelmaccou]

Using the Classify solution, do you need to apply the CSS to the groups AND the elements within it that you want to be full height? Or is it only necessary to make the element itself full height? Will not adjusting the parent group cause issues?

[brian1]

You would need to manage both the element itself and its parent (wrapping) container, up until the point that you’ve hit the page level.

[tomerlan5]

Amazing!!

[lancegerarrd]

$6 for js workflow plugin gone. This doesn’t work

[brian1]

It’s the JS toolbox plugin Toolbox Plugin | Bubble

[lancegerarrd]

This is working on my page element but not on my group element. why?

[brian1]

You probably aren’t walking the DOM. Add the Classify plugin, and make sure you add a class to that group element. You’ll need to adjust your CSS rule to flow down to that element.

[lancegerarrd]

I’ve added the class to the group. I don’t know what you mean by walking the DOM but the group is the group contains all other elements in on the page.

Just In case I’m applying the right solution to the right problem i need to specify that my problem is getting the page height to adjust to the currently visible group.

[boston85719]

I don’t know. If it is setup properly it would.

[lancegerarrd]

checklist:
-created html element within the group and pasted div with id “anchor” in the appearance tab
–set id of the group to “anchor”
-installed toolbox
-create workflow with run javascript (on page load). Paste javascript inside.

group still doesn’t show 100% viewport height. where did i go wrong

[boston85719]

I don’t know…I don’t recommend the javascript method

Setting a group to be % of viewport height dynamically

In my opinion best approach to this is to install the classify plugin and use CSS After installing classify plugin you would add classes to the id attribute of the element you want to target [Screen Shot 2021-01-10 at 12.48.04 PM] then place an HTML element onto the page and put the styling required [Screen Shot 2021-01-10 at 12.47.53 PM] The example above is full screen if wanted half height would do 50vh if wanted half width would do 50vw the benefit of this approach is that you have e…

[brian1]

I would suggest trying the classify method. Remember - you need to set both the target group and the wrapper, all the way up to the top level group to also be 100vh. This means you may need to either (a) apply a single class to multiple groups, or otherwise define multiple classes that are 100vh, depending on what your specific needs are. That said - there may be some additional math needed, if you have stacked groups (so one may be 10vh, and another may be 90vh for example)

[kim3]

I’m completely stuck on this.

I’ve installed the ‘classify plugin’
However I can’t find a place to add the ID Attribute.

Do you do it on the page?
on a group or whatever element you want set the viewport for?

But first and foremost I can’t find the ID Attribute field.

[boston85719]

@kim3

But first and foremost I can’t find the ID Attribute field.

Go to the settings Tab…then General and scroll to the Favicon section and check the box to expose id (just under the two color options)

[kim3]

thank you @boston85719 that worked.
However I can’t get a picture to fill my my entire background and I’m not sure what I’m doing wrong.

I have installed classify plugin
I’ve added to my page the the following ID:

{addClass:"floater"}

I’ve then set a image as background
I’ve added a html element with the following in apperance:

<style>
    .floater{
    height: 100vh !important;
    width: 100vw !important;      
    }
</style>

What do I do wrong if i want the picture to take over my screen?