# Setting a group to be % of viewport height dynamically

**URL:** <https://forum.bubble.io/t/setting-a-group-to-be-of-viewport-height-dynamically/12700>\
**Category:** Tips\
**Created:** [April 21, 2017, 12:56am UTC](https://forum.bubble.io/t/setting-a-group-to-be-of-viewport-height-dynamically/12700 "2017-04-21T00:56:16Z")\
**Posts on this page:** 1\
**Showing post:** 26

<div class="post-metadata">

**Author:** ![Lucien](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucien/32/58216_2.png) [@Lucien](https://forum.bubble.io/u/Lucien)\
**Post date:** [May 12, 2018, 3:28pm UTC](https://forum.bubble.io/t/setting-a-group-to-be-of-viewport-height-dynamically/12700/26 "2018-05-12T15:28:57Z")

</div>

FYI, I found a way, but it is a dirty one. I would be glad if someone can share a more elegant manner to do this (especially, one that would allow having a fixed height for the vertically centered element).

In the editor, I set up everything at the top like this:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/0/8/08cc0ab8fa3515fa007e89d4fe63efe07c0a9dee.png)

The white group was the group I wanted #vertically-extended and the red element was a button I wanted to get #vertically-centered (I just wanted a text but I used a button because it keeps the text inside vertically centered when it is dynamically resized, unlike a text element).

I directly exposed the IDs of all elements in the app Settings so I didn’t have to add any HTML element in the groups I wanted to modify but simply to specify the relevant ID at the bottom of the contextual element menu of each element.

Here is the JS run upon loading:

> $(document).ready(function(){  
> $(“.main-page”).css(“height”,“100vh”);  
> $(“#vertically-extended”).css(“height”,“100vh”);  
> $(“#vertically-centered”).css(“height”,“10vh”);  
> $(“#vertically-centered”).css(“margin-top”,“45vh”);  
> });

I defined a relative height (10vh) for the red element and a corresponding top margin (45vh) to get everything perfectly centered. I could not find a way to define the margin in a manner that would work with a fixed height for the red element (“auto”, “middle”, “50%”, etc. did not work). I guess this is an easy one for the JS experts out there 🙂

The result:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/8/3/8365976928b8805886cbae1464c612323ec7db28.png)

Here is the link to the editor:

> **[Bubble Editor - testingenvironment](https://bubble.io/page?type=page&name=full-height&id=testingenvironment&tab=tabs-1)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Edit: finally found the way to have a fixed-height element vertically centered (need to position the element 50% down from the top of the viewport and then move it back up by 50% of its own height):

> $(document).ready(function(){  
> $(“.main-page”).css(“height”,“100vh”);  
> $(“#vertically-extended”).css(“height”,“100vh”);  
> $(“#vertically-centered”).css(“top”,“50vh”);  
> $(“#vertically-centered”).css(“transform”,“translateY(-50%)”);  
> });

---

_[View the full topic](https://forum.bubble.io/t/setting-a-group-to-be-of-viewport-height-dynamically/12700)._