Element full height on page

bump on this solution, I still haven’t found one from Bubble

Custom CSS + the Classify plugin by @julienallard1.

The .main-page part makes the whole page fit to the height of the viewport

The .full-height class you put on any specific element that you want to also want as 100% height of it’s container. (You’ll need to use Classify to do this)

Screen Shot 2020-08-12 at 12.32.33 PM

(this is just a (hidden) HTML element with a height and width of 1)

Not sure what is on @Bubble’s roadmap but full height pages seem like a pretty standard thing for websites cc @allenyang

1 Like

What do you want to achieve?

I’m trying to do the same but not getting the result yet.
Where should I write the custom CSS script? I did add the Classify plugin.

@julienallard1 I’m trying to get my visible group height to match the viewport height. Would you be able to post a simple example with that goal?

I’ve tried this code that @boston85719 shared

But I still have a white strip at the bottom of my page that won’t go away for some reason (even though my backgound isn’t white) on long iphones. Any ideas?

What is on the bottom of the page in the editor?

Nothing. The whole page is stacked groups that hide / show based on custom states

What is that floating group you have at the bottom for the chat messenger?

Using Crisp. It’s some code in my header

I’m not too sure but I once read that the viewport itself can have some padding by default.

Try adding this to your CSS:

body {
padding: 0;
}

If it does not work try replacing body with document or window or html.

I’d venture to say that is what that white space is…but somebody else more knowledgeable about code could tell you what it is.

You think it might be caused by the Crip code?

Thank you @julienallard1 - I should add that code within my style tag of the HTML element? (hoping something else because looks like it didn’t work)

I would follow Julliens advice, and if it persists, I’d consider looking at the code you use for the Crip and see if there is white used as a color for a group element that is probably the floating container, but I don’t know I’ve never used the Crip code for a chat messenger.

I removed the crisp code to test, but issue persists :frowning: it was a good idea. i’m inspecting everything now along those lines (looking for white stuff)

That’s right.
Perhaps you could also include border-width: 0; and margin: 0'just in case?

Darn no dice. Appreciate your help all the same!

Do you know how to use the developper tools in your browser? The selection tool to inspect elements on the page would probably be of help… On macOS, the shortcut to enable the tool is SHIFT+CMD+C

That’s a great idea. Here’s the tricky part… I’m using BDK Native. The issue only occurs when viewing our mobile app. When we view in browser with iPhone simulated settings, the white space doesn’t appear. I don’t suppose there’s a way to use the developer tools on an app is there?