Nested Floating Group 100% Page Width

PhastCo · 2024-11-04T07:27:18.157Z

Is there anyway we could have a floating group inside a reusable element to take up 100% page width and page height?

johnny · 2024-11-04T18:25:01.391Z

Yeah, make it 100% fixed width and height

ed19 · 2024-11-04T18:30:47.882Z

If the above doesn’t work for your use case, you can set a page element to page width/height using “vw” or “vh” in CSS.

#elementId {
  width: 100vw;
  height: 100vh;
}

This is viewport width/height, and is responsive to device screen size.

PhastCo · 2024-11-06T12:06:34.099Z

@johnny Thanks for the response! Let me elaborate more - the reusable element here is not 100% page width & length itself. Is there anyway to make it so the floating group can still be 100% page width & height whilst the parent reusable is not?

PhastCo · 2024-11-06T12:08:01.783Z

Thanks @ed19 - the reusable element here is not 100% page width & length itself. Is there anyway to make it so the floating group (child element) can still be 100% page width & height when the parent reusable is not?

ed19 · 2024-11-06T12:14:47.477Z

Yep that was my assumption, the css provided in my previous response will work for any element on the page, as (unlike %) it ignores the constraints of parent elements. Comes with its own set of issues to work around, but should set you on the path to a solve.

You may need to set elements’ positions to absolute in order to get it centred, as this will adjust the size but not the positioning.

ed19 · 2024-11-06T12:46:29.761Z

I actually lied a little, did a quick test and there’s a little more to it. Made an example, not too difficult to implement. CSS needs to be adjusted to the following:

<style>
/* remove default page margins as they will affect width */
    .Page {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
/* reset positioning of the reusable, as absolute elements (the floating group) anchor to the first positioned parent */
    .CustomElement.baTaHaCaN /* your element selector will be different */ {
    	position: static !important;
	}

/* bubble sets width/height using all of the below, so all affect size changes */    
    #fg_viewport {
    	width: 100vw !important;
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
</style>

Apologies for the grotesque number of important tags, I got mad at bubble and gave up trying to write CSS properly, it’s an easy way out. You could probably achieve the same by using more specific selectors (which is generally better practice, though may not matter in your use case).

Editor:

Bubble

Bubble Editor - Forum Tests

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.

Page:

Bubble

Bubble - Visual Programming

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.

PhastCo · 2024-11-08T10:27:30.146Z

Wow thanks @ed19! Yep it seems the !important tags are a must have to overwrite css on Bubble. It took too long with just css I had to use custom JS + CSS with the popup element instead for it to work.

I’ll have a test with your CSS only method which is definitely better for page performance. Once again, thanks for going into detail with this topic!