5 Simple Scripts to Enhance UI/UX for Your Bubble.io App

How to Customise the bubble.io app scrollbar? (No Plugins)

Bubble.io’s default scrollbar doesn’t give the desired UI/UX your app needs. Rather than using any plugins, you can write code to achieve the scrollbar style you would like.

You can use this code in multiple places depending on your use cases.

• To apply the scrollbar styling to the whole app: Go to settings → SEO/metatags → Script in Body from your bubble.io editor and write the code mentioned below.

  

• To apply the scrollbar styling on the whole page level: Go to Page on bubble.io editor, open page properties, and write the code mentioned below on Page HTML Header

  

  Here is the code that you can copy directly and paste into your app.

<style>
/* Customize the scrollbar */
::-webkit-scrollbar {
  width: 2px; /* Width of the scrollbar, you can modify the number */
}

::-webkit-scrollbar-thumb {
  background: #000000; /* Scrollbar thumb color, you can modify the color hex code */
  border-radius: 5px; /* Rounded edges for the thumb, you can modify the number */
}

::-webkit-scrollbar-thumb:hover {
  background: #FFFFFF; /* Thumb color on hover,you can modify the color hex code */
}

::-webkit-scrollbar-track {
  background: #FFFFFF; /* Scrollbar track color,you can modify the color hex code */
  border-radius: 5px; /* Rounded edges for the track,you can modify the number */
}


</style>

• Now If you want to modify the styling of the Repeating Group Scrollbar or the scrollbar of specific components on the page, Here is the code

    <style>
    /* Customize the scrollbar for the Repeating Group */
    #custom-scrollbar ::-webkit-scrollbar {
      width: 2px; /* Width of the scrollbar */
    }
  
    #custom-scrollbar ::-webkit-scrollbar-thumb {
      background: #000000; /* Scrollbar thumb color */
      border-radius: 5px; /* Rounded edges for the thumb */
    }
  
    #custom-scrollbar ::-webkit-scrollbar-thumb:hover {
      background: #FFFFFF; /* Thumb color on hover */
    }
  
    #custom-scrollbar ::-webkit-scrollbar-track {
      background: #FFFFFF; /* Scrollbar track color */
      border-radius: 5px; /* Rounded edges for the track */
    }
    </style>
  

  Enable the ID Attribute option in your app settings:

  • Go to Settings > General.

  • Check the box for Expose the option to add an ID attribute to HTML elements.

  • Now Add an HTML element to the page and paste the modified code into the HTML element.

  • In the Repeating Group's properties, assign the ID attribute as custom-scrollbar

How to Create a Custom Picture Uploader or File Uploader in Bubble.io? (No Paid Plugins)

There are many style limitations for picture uploaders and file uploaders in bubble.io. So you would like to design a custom uploader using groups, icons, and text elements as per your requirements but on clicking that custom uploader, it should work the same as if a user is clicking on picture Uploader or file uploader.

For example, here is the custom uploader I designed using group, text, and icon elements:

But on the element level, there is a tiny picture uploader inside:

Now On clicking on the group certificate image, I want the UX to be the same as if the user is clicking on the picture uploader. Here is how to achieve this:

• Install the Toolbox plugin in the bubble.io app

• On click of Group Certificate Image, set the ‘Run Javascript’ action with the following code

    document.getElementById("education").getElementsByTagName("input")[0].click();
  

• Place the ID Attribute ‘education’ on the element that you would like to simulate on click, in our case, it is the picture uploader

  

  So clicking on the group will work as if the user has clicked on the picture uploader.

How to prevent page scrolling when popup is visible in bubble.io? (No Paid Plugins)

Here are the reasons why this is necessary:

• Problem: If the user scrolls while the popup is open, the background content moves, which can be distracting. In Bubble, the popup might stay in place while the background moves, causing visual issues like misaligned elements. Scrollable backgrounds can confuse users using keyboards or screen readers, as they might interact with the wrong elements. If the page scrolls behind a popup, it can mess up the layout, especially for apps with parallax effects or sticky elements. Users might accidentally click or interact with background elements while scrolling, leading to unintended actions.

• Solution: Disabling scrolling ensures the background remains static, keeps the user focused on the popup's content, prevents design inconsistencies, and avoids unintended interactions.

Here is how to achieve this:

• Install Toolbox Plugin

• Create a ‘Do when condition is true’ workflow and Put condition that this will trigger everytime when the popup is visible.

• On trigger of this workflow, set the ‘Run Javascript’ action with the following code.

• Place the ID Attribute ‘experience’ on the popup

  With this, Scrolling is disabled for the background but enabled for the popup content if it overflows the given height.

// This is every time the popup is visible

  $("#experience").wrap( "<div class='innerScroll'></div>" );

  $(".innerScroll").css({'overflow-y':'auto','position':'fixed','top':'0', 'left':'0', 'right':'0','bottom':'0','z-index':'10000'});

  $("body").css('overflow','hidden');

  var esc = $.Event("keydown", { keyCode: 27 });

  $(".innerScroll").click(function(){
    $("body").trigger(esc);
  });

• Create a ‘Do when condition is true’ workflow and Put condition that this will trigger everytime when the popup is not visible.

• On trigger of this workflow, set the ‘Run Javascript’ action with the following code.

With this Scrolling on the page (background content of popup) is re-enabled, returning the page to its normal state.

//   This is every time the popup is not visible

  $("#experience").unwrap();

  $("body").css('overflow','auto');

How to Adjust Page Height based on Header Size in bubble.io? (No Plugins)

Adjusting the page height based on the header size is important for creating a clean and professional layout. This ensures that your content dynamically adjusts to fit the available space, without being hidden behind or overlapping the header.

For example:

• On a page with a fixed header, you want the content area to fill the remaining screen space.

• As the header's height might vary based on screen size or dynamic content, it’s important to account for these variations.

The header can be a fixed or floating group, depending on your design.

• Add an HTML Element to your page where you want to insert the CSS.

• Inside the HTML element, paste the following CSS code:

<style>
#pageheight {
    min-height: calc(100vh - 60px) !important; /* Adjust '60px' with your header's height dynamically */
}
</style>

Here 100vh is the total viewport height (100% of the screen height).

set the ID pageheight of your Parent Groups other than the Header that needs to be adjusted based on the header.

How to Create Full-Height Sections in Bubble.io for a Responsive Layout? (No Plugins)

Creating sections that fill the entire screen height is a common requirement, especially for landing pages, hero sections, or single-page layouts. In Bubble.io, you might want to ensure that certain elements always take up at least the full height of the viewport, no matter how much content they contain.

1. In the Bubble.io editor, go to the page where your section is located.

2. Drag and drop an HTML Element onto your page.

3. In the HTML Element, insert the following CSS code:

<style>
#viewport {
    min-height: 100vh !important;
}
</style>

Here 100vh is the total viewport height (100% of the screen height).

you need to apply the viewport ID to the group you want to stretch.

1. Select the Group element (the one you want to be full height) in the Bubble.io editor.

2. In the Property Editor for the group, look for the ID Attribute field.

3. Set the ID to viewport.

In conclusion, mastering customization in Bubble.io can significantly enhance the user experience and interface of your applications. By leveraging custom code for scrollbars, uploaders, popups, and responsive layouts, you can create a more polished and professional look without relying heavily on plugins. These techniques not only improve the aesthetic appeal but also ensure functionality across various devices and screen sizes. As you continue to explore and implement these strategies, you'll find that Bubble.io offers a flexible platform for bringing your app design visions to life.