Recently in the news for their $100 million Series A round, Bubble is a no-code giant that has been around for almost a decade. It also happens to be our choice for the initial design and deployment of Kiter. We made this decision for a number of reasons, but primarily because a.) I didn’t have any web development experience and b.) we wanted a way to quickly iterate and build/release new features with a small team.
At this point it was just my brother Peter and me working on Kiter and we didn’t want to spend weeks learning react, css, and html let along what would be needed for the backend db. In hindsight, this was a fantastic move as it allowed us to go from idea to MVP in less than a month. Crazy how it has changed since then. We initially also built our landing page on bubble, but quickly moved this to a full stack setup.
As those of you who have been users for more than a couple of weeks know, we used to be a multipage app. This was before I had done any research into web dev and it seemed like the best way (it was not). One of the limitations with bubble, we feared, was the speed. What we realized, however, was that this was in fact a result of our design rather than Bubble’s ability. All of this came to head last month when we were working to improve ease of use and speed. We decided it was finally time to transition to the more commonly used single-page application. In order to do this we needed to solve two problems that using bubble caused us:
1.) How to have a true single page app (I.e no scrolling of the entire page).
2.) How to have the elements on the page dynamically fill up the available space.
Both of these would be simple problems with simple solutions on a traditional full code react web app, but not with Bubble! Herein lies one of our biggest frustrations with bubble. If it is something they thought of, then it is very easy to use and integrate. If it isn’t, then you will spend A LOT of time scouring the forum looking for a complex solution to a simple problem.
I wanted to write how we ultimately solved these problems incase there are any other Bubblers out there.
How to have a true single page app
The first issue we had to solve was how to set our page height so it dynamically adjusted to the user’s viewport. After scouring the forum I came across this blog post and started here. This post did a fantastic job of explaining how to use jQuery to dynamically resize and was a great resource to start with. Unfortunately, as I tried to apply this logic to the specific elements and groups on our page it became more and more complicated to the point where it simply wasn’t working. I also don’t have much experience with jQuery so it is possible I was doing something wrong and it is a simple fix!
How to have the elements resize and repeating groups scroll
The next issue was having the elements resize dynamically as some percentage of the total viewport (I.e {height: 50vh;}). We were able to set this by running a jQuery call every two seconds to resize the main page which also triggered the elements to rerender. This seemed like a backwards way of doing it as it was almost like hardcoding an update function.
The other issue with this approach (the initial genesis for this came from this blog) was that when you resized the repeating groups, they only would show the data that had been loaded initially. So although all of the elements were loading properly it was happening on a 2 second delay and only showing some of the items. We actually hardcoded in an automatic scroll to try to get bubble to load all of the items before it was resized. This was a fix, but proved to be ineffective if there were over 7 items in our list.
NOTA BENE: Later I realized you can set it so that the repeating group loads the full list. This may have solved the issue, but I am not certain.
After a lot of head banging and experimenting with jQuery and CSS I came across this post. I am not sure how I missed this initially or if Bubble simply didn’t have these features when earlier posts were written, but this worked fantastically. To summarize the post we simply put id tags in all of our elements, added an html block to the main page and using <style> tags set the css for each element. You need to have !important following the CSS line so as to override bubble’s default styling.
For the repeating groups it was required to set the list settings to “full list” so that all of the data is loaded right away. And within the repeating group css have:
#yourRepeatingGroupId {
height: 40vh(for example) !important;
Overflow: scroll !important;
}
That is a short description of how we were able to solve a simple styling challenge on our no-code tool. What I love (and hate) about bubble is that I am able to apply all of the computer science skills I learn at school while not actually worrying about syntax. It is, in sorts, a purely computer science based interface.
We would love to hear your experiences! Send them over to mail@kiter.app.
