I can’t seem to get my single page app to fill the page height. I would like it to fill the page (minus the header). is there any way to do this?
Hey!
Can you be more specific? With images am more details?
Anyway, take a look here. See if helps…
1 Like
You can do this by using some JS/CSS, it’s pretty simple:
- Add HTML header to page:
Where 39px is a height of iphone x notch.
1 Like
Hello and Thank you for responding!
I am currently working on an app that is responsive down to any screen width and seem to be fine that way but am having trouble with it filling the entire page by height.
I am currently building a single page app that is structured with a Header as my Nav and using Custom States to switch between pages.
I have a Group as my “Group Home” that is acting as my home page. My problem is that when I render the page in different screen heights (when page height > group home height), the Group home is having a fixed height and I would like it to fill the screen. is there a way to have the Group Home extend to the whole screen?
I will take a look at the link you provided as it will help when I take the next step and turn this into a mobile app!
Thank you for responding!
I am pretty new to Bubble so I am still getting to know everything. I am currently only working on a computer version on my app. Would this also work on desktop size screens? also what is the best way to add html to my app?
I have no coding experience so I am sorry if I don’t make sense.
Yes! It will work also! You only need to remove “-39px” to leave only 100vh in your script.
What is a vh you can read here: CSS Viewport Units: vh, vw, vmin, and vmax — SitePoint
Where to include this? When you double-click on your page, settings window will open:
On below section you can find “Page HTML header”, includ this script there and voila!
Thank you for all the help! Your solution worked with getting my Page to render to the right height! As I fixed one problem another occurred! (of course right ha)
I have colored my groups to show the problem I am running into now. I am building a single page app using Groups and Custom States for page navigation. I will insert a Photo to show what happens when the screen is too tall for my group.
As you can see I have run into a bit of a problem with filling my page. do you have any suggestions? The groups don’t seem to be dynamic with regards to height of the page. Is there a way to fix this?
Thank you for all your help!
Hello!
I wanted to attach a picture to see if there is anyway you could help with this.
As you can see I am creating a single page app using groups and custom states for page navigation. I have figured out the Page height but the group heights do not scale based on the screen size leaving a lot of space underneath when the page is too tall. Also does not shrink down when screen is smaller.
Any help would be much appreciated!
Thank you
Try with floating group, or you can do a little workaroud, go to Settings → General → Expose the option to add an ID Attribute to HTML Elements and thic it.
Then go to Group Settings and on the below settings you can assign ID Attribute, for example group1:
Then you can add following JS script in same way as before:
#group1 { min-height: 100vh; }
Hey, I am hoping to get some help with this, I tried this solution but instead of filling to page size on iphone 11 it is showing the html element on the top of my screen, how do i fix this?
Hey!
Have you found a solution to this?
Thanks