This option will be available on a free plan. Could you try and update the version of the Bubble editor you're using to make sure it's on the most recent version.
Hi thanks for the tutorial but I have a quick question, I have been able to hide and remove the scroll bar however my repeating group is not responsive to my mouse's scroll wheel and is now stuck in position without the scroll bar underneath. How do I remedy this?
That does seem strange 🤔 If you remove the custom CSS, does it the issue still occur? I'm under the impression this may just be a bug within Bubble or your browser. It could be worth trying to just rebuild the repeating group from scratch again to see if it resolves the issue. Hope this helps point you in the right direction.
Glad it could help! What kind of customisations are you hoping to add? I haven't had a chance to do this myself, but I'd be happy to do some research and put the tutorial on my to-do list.
Thanks! And you can run a mobile preview by using Chrome dev tools within your browser. This article explains the process: www.browserstack.com/guide/view-mobile-version-of-website-on-chrome Hope this helps!
Are both the scroll bars within a repeating group, or are they on the overall page? If they're within a repeating group, the CSS in the tutorial will remove any scroll bar, regardless of its direction. Hope this helps.
@@stefanrossouw9417 Just to double-check, have you unselected the option on your repeating group to set it as a fixed number of rows? If this is checked, you won't be able to scroll within your repeating group. If you still find you're running into an issue, feel free to shoot me a message at lachlan@buildingwithbubble.com and I can help you find a solution.
Hey man, great video! What about on desktop, I've been searching for an answer and can't find anything. I'm looking to cover all engines such as Brave, not just Safari. Cheers
Thanks! And I've personally never used Brave, but they may have something that blocks certain scripts from running. Let me do some searching around and see what I can find.
Hey, happy to help. Can you just double-check that both of the HTML ID names are the same for both of the repeating groups you added on your page. These will also need to share the same name as the ID added in the HTML element.
What if you want to hide the scroll bars at global level/for all pages of a web site or app (without using duplicate CSS code)?! Something like a global CSS style.
Great question. I've never had the chance to look into this, but I know it's possible to give each repeating group the same ID attribute name - meaning your one HTML element will remove the scroll bar across multiple repeating groups. Hope this helps!
@@BuildingWithBubble Yes, it helps. However, I forgot to ask if there's any chance to use a better solution. Using that HTML element on every page of a web site seems a bit crude. I know it can be used inside a reusable element such as header or footer but can't we get rid of it altogether?
That was great, but do we have to add one of these html boxes for every scroll bar we want to hide? or can we repeat the same line of code in the same box for each bar we are trying to hide?
@@BuildingWithBubble I know Bubble is a no-code platform but the lack of even the most basic CSS knowledge and advice is surprising. Don't give multiple elements the same ID as it is very bad practice and could result in unexpected functionality. Instead, give every element you want to style a unique ID, and select them all by using commas (,) in your CSS; for example, #Element1::-webkit-scrollbar,#Element2::-webkit-scrollbar { display: none; } #Element1,#Element2{ -ms-overflow-style: none; scrollbar-width: none; } Using commas allows you to select multiple elements (by their ID in this case). Also, some Bubble specific advice: You don't need to use an HTML element at all. The page element (the most top level element of each page) contains a "Page HTML Header" field in it's property editor which is the appropriate place for embedded styling. I recommend taking at least a beginners CSS course before advising people going forward.
Great tutorials. I have a tutorial request. I am working on a puzzle game app ...& I need to save response in Custom States List. The problem is I can't save duplicate values in the list as bubble doesn't allow duplicates in custom state list. It automatically removes the duplicates. Bubble forum suggests having a new thing in database for each response, which is very painful way. This step is a blocker for my app. Please help.
Thanks! And I've ran into this problem in the past as well. In the end, I decided to temporarily create a value in my database, then delete it when it was no longer needed. A great example is when you create a checkout for a user. You can temporarily store the items they've added to their cart in your database, then, once they complete their purchase, you can delete those items. I know this isn't exactly what you're looking for, but I hope it helps.
@@BuildingWithBubble someone suggested me to use JavaScript for bubble by toolbox plugin. And use local storages to store and retrieve values. It is possible but there is no tutorial on how to make use of toolbox plugin to get & set values through JavaScript.
