Oracle APEX Hack: Create a Floating Action Button

Looking to give your Oracle APEX mobile app a modern, native feel? Here’s a quick hack: add a floating action button that stays anchored at the bottom corner just like in popular mobile apps. This small UI tweak can make your app feel more polished and intuitive, especially for mobile-first users.

The CSS

A floating action button is a circular button that “floats” above the UI, typically in the lower right corner, providing quick access to a key action (like “Add,” “Create,” or “Scan”). With a bit of CSS and a Universal Theme icon, you can implement this in minutes.

How to Implement

Step 1: Add a Button to Your Page

• In Page Designer, add a new Button (e.g., “Add”) to your APEX page.

• Set its class to c-floating-bt.

• Choose an appropriate icon (like fa-plus or fa-camera).

  

Step 2: Apply Custom CSS

Add the following CSS to your page (Page > CSS or in your app’s CSS file):

.c-floating-bt {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 100;
  height: 65px;
  width: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 2rem;
}

The button will appear at the bottom right of the page.

Conclusion

• Native Feel: Mimics the UI of leading mobile apps, making your APEX app feel instantly more modern.

• User Experience: Keeps primary actions accessible, reducing taps and scrolling.

• Easy to Implement: Just a button and a few lines of CSS, no plugins or complex code.