Custom Scrollbar - New Plugin from Zeroqode

Showcase
1

hey Bubblers!
we have published a new plugin - Custom Scrollbar!

Customize the look of the page and repeating group scroll bars. Drop the element on the page (can be hidden) and indicate the IDs of the elements which you want to customize. (Alternatively you can apply the custom scroll through a workflow, for example on a page load) Make sure to enable the option to set custom IDs in your app. Go to your apps’ settings - > General - > Expose the option to add an ID attribute to HTML elements

Here is the demo page:
https://plugintests.bubbleapps.io/custom_scrollbar

Here is the plugin page:

32
322474×1200 137 KB

Levon Terteryan
Founder @ Zeroqode & Bubblewits

let’s stay in touch on twitter!

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

9 Likes
2

Does this let you hide the scrollbar on Windows? Or maybe hide it unless scrolling is active?

3

if you meant browser then yes, there is an option to hide the main browser scrollbar :slight_smile:

1 Like
4

Awesome work @levon, thank you!

5

thanks, Scott! :slight_smile:

6

Great plugin @levon. Will be using this everywhere as the defaults windows scroll bars are very intrusive. Very nice work.

A couple thoughts for future improvements:

–The width adjustment doesn’t seem to work on horizontal repeating groups, maybe it could
–Settings stored in a Style
–Hide scroll bar if the list doesn’t fill the area? In other words, don’t show the scroll bar when there is nothing to scroll
–I can currently hide scroll bars for a repeating group by matching the background color, but would be nice to have a checkbox like you have for page scroll bar. It could also be done through styles if they were supported.

Obviously, let me know if I’ve just missed these!

Thanks for the great tool.

–Ken

7

Thanks a lot Ken for thorough feedback, this is very helpful! :slight_smile:
I have noted down your suggestions and we’ll consider them when we have some spare time,
Thanks again!
Levon

8

One more for you @levon…hiding the scrollbar of an iframe.

9

noted thanks!

10

Hey All,
we have just published an update to this plugin with the following improvements:

  1. Added option to hide RG scrollbar if nothing to scroll,
  2. hide scrollbar of any element by indicating ID (including iframes, but in that case the iframe content will not be scrollable)
  3. fixed the scrollbar width configuration for horizontal scrollbars

Enjoy! :slight_smile:
Levon Terteryan
Founder @ Zeroqode & Bubblewits

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

3 Likes
11

Hey @levon Thanks for the iframe hide feature…but I’m not having any luck with it. I have added a second custom scrollbar element to the page, and selected the Hide scrollbars option, along with the element id. Any trick to making this work?

12

Also for future enhancement… Support for Edge browser–customizations aren’t coming through.

1 Like
13

Hello, can you please share a screenshot of plugin settings ?
thanks

14

Sure…and thanks for looking at this. Now, I should say that what I really need (not related to the plugin) is for this image to load without the use of iframe, but I haven’t found a solution to that.

06%20AM
06%20AM680×872 47.2 KB

15%20AM
15%20AM660×1092 50.4 KB

37%20AM

15

Is there a way to make the browser scrollbar reappear after its been hidden?
ie Group A is Visible - the scroll bar is hidden - Group A is hidden Scroll bar is Visible.

16

Did you try playing with the “conditional formatting” properties of the plugin? (See the screenshot below)

image
image740×1088 53.7 KB

17

I have. I can make the page scroll hide both through workflows and conditions when en element becomes visible but there is no “unhide” condition or workflow option. I’ve tried creating a 2nd condition stating element" isin’t visible and leaving the “Hide Page Scroll Bar” unchecked but it doesn’t make it reappear. Right now my only work around is to “refresh page” which is not optimal. Any suggestions?

18

please see the screenshot below, ticking and ticking the checkbox is equivalent to hiding and hiding. Please give it a try and if it doesn’t work we’ll take a look, thanks!

image
image692×508 27 KB

19

Hello, sorry it took us some time to get to this,
So here is the updated code that you need to use in your HTML object

<iframe id="Your_id">
    <script src="https://www.avatarapi.com/js.aspx?email=Contact Selected's contact's email_primary&size=90">
     </script>
</iframe>

after you set your ID instead of Your_id , use the same ID in the plugin.
also remove the checkbox " display as an iframe"
this should do the trick
thanks

20

Thanks for that @levon but that prevents the image from displaying.

This script works perfectly if you just drop it into a non-bubble html page–no iframe needed–but for some reason it does not work when placed in an bubble html element, unless iframe display is selected. I tried your suggestion of manually adding the iframe tag and un-selecting iframe display on the element properties, but the image just doesn’t display. For reference, you can see the instructions here: https://avatarapi.com/

Ideally, I figure out why this script works easily elsewhere, but not in bubble…but until then, was hoping to hide the scrollbars from the iframe.

Thanks for helping with this!

–Ken