I love bubble and it blows competitors out of the water with its no-coding capabilities!
The only thing holding me back is the lack of responsive height capabilities.
It would even be easier if bubble were to have a “coder” option where all element sizes could be defined by the user with code. At least then, all elements could be made responsive in both height and width! As well as allowing users to make the most of CSS grids!
There are the CSS plugins, but they always seem to conflict with the preset dimensions applied by bubble, causing a lack of functionality.
What’re everyone’s thoughts on this? I feel like I have over simplified the issue.
you can give the elements their own html tag (needs to be activated in the settings) so you can get unique css selectors. Then drop a html element in the page and do the typical css <style> and </style> tags just to notify it you’re writing css and then just edit the css like that. That’s what I do when I run in to a design flaw with bubble. Might not be the best solution but it does the job for everything I need.
I don’t have a working project up at the moment, I’ve deleted those past projects.
I basically just use it to position things relative to the viewport.
The only bit of code I can find on my pages at the moment is super simple. It just makes the page size the size of the viewport and centers the group holding the text vertically whilst pushing it off the left wall slightly. My coding skills in any language aren’t the best so I’m probably making tons of mistakes but it’s working so far!
It’s super basic but I’ve done css animations, transitions, transforms… etc etc with it and it’s kinda all purpose.
using the tags
<html> and </html>
<style> and </style>
<script> and </script>
make HTML, CSS and Java readable in the html element. only problem i’ve come across is sometimes you have to add ‘!important’ to the end of your css line just so it overrides bubbles css. apart from that you can do practically anything with it.
Hi @AliFarahat, maybe you can help me with this. I have viewed the video and installed the plugin. But I can not achieve what I want. Please, take a look at this
I would like to have a side bar menu with links on the upper side of the group and a toggle button fixed a the bottom of the page. I also want the side menu group to fill the entire height of the page (minus the upper fix bar). I hope you can help me with this. Thanks
///////////////
UPDATE MARCH 30, 2020
Problem solved after some tests (and a little css added to the page)
I’ve installed the Toolit plugin and am trying to use it to keep a group always horizontally centered in the viewport.
I have created a quick video showing the issue and proposing a solution:
Is it possible to achieve this in either Javascript or through a plugin upgrade that takes into account both the % offset AND the px offset of the group?
For instance:
200px hero space, 400px group to be centered, and 200px bottom spacing
Setting would be 50% vertical target and -200px offset (half of group height). This would allow for centering at all heights. EDIT: Probably better to have the px offset calculated since that can change as you resize the page (if the group gets taller from being squished).
Example 1200px tall window:
50% x 1200px = 600px target
-200px offset = 400px spacing on the top
I’ve done something that is a pain in the butt as it requires Javascript, and I end up running it a lot…in fact, I created a custom event where I run it three times separated by pauses to ensure it gets everything once all data is loaded.
I’m using it on a search results page with an interactive map, so whenever there is an event that causes data to change, like pagination of results or some other events that I need to have a smooth UX I run the javascript…it took a while to get it all to work, but I’m happy with the results.
Ideally somebody with more knowledge of coding would chime in on the thread and show how to use HTML and CSS style properly as I’d personally like to move away from the javascript method, but I don’t know how to code, so this was all I could do.
I first get my browser height on page load and save it in a custom state and run all my javascript sizing functions using that custom state to change the heights of all elements proportionally…this only really works on desktop, and I’ll be doing something different for mobile.
In this code the RG container is something I needed to use to get the RG to resize and also scroll after resizing the page with CSS…there is a thread that talks about how to do it, but I couldn’t get it to work and wasn’t afforded any advice from the two bubblers who discussed what they apparently had as a solution. It took me a while to figure out another method, but I now have a page that resizes and an RG that resizes and still scrolls.
The other code in there for RGListings is to get rid of the scroll bar.
I solved this using an HTML tag and “Flexbox” in CSS. It’s actually very simple and the only thing left to do is appropriately cover up (put a background) behind the groups I do want to float.
I made a video here for others to see if it is useful in the future!
