Can we please finally get support for non-pixel units in element heights and widths?
Come on, seriously… It’s 2020 and I’ve just wasted half the day trying to figure out how to make a sidebar’s height equal to the viewport height (something a simple height: 100vh; would fix in CSS) and, in another instance, how to make it as high as the available space on the whole page (i.e. height: 100%;). I figured out neither.
A few plugins I looked at — such as CSS Tools — couldn’t help. As a paying customer, I can tell you it’s really tiresome to have to resort to all sorts of hacky workarounds for common front-end things, such as being forced to pull crazy stuff like this just to make a sticky footer.
@funwtp Thanks. I tried that, too, but it didn’t work. When the page loaded, all the custom CSS I had added to the HTML header immediately got overwritten by more specific CSS of the element itself…
One possible workaround I’ve found that’s truly “native” to Bubble (so to say) is putting the sidebar repeatable element inside of a floating group, then giving that floating group some insane height like 50k+ px and then making the page height smaller than that so the floating group gets cut off. No idea if it will still hold once dynamic data starts populating the app and making the pages really long.
But again, even that just feels hacky and could be entirely avoided if we had support for non-pixel units.
@sudsy Thanks for the tip, I ended up getting what I needed done with JS.
As for !important, I try to avoid it whenever I can as it’s a pretty bad web development practice. It can cause all sorts of weird layout bugs later down the line the source of which eventually becomes almost impossible to locate.
