APEX Floating Action Button

Search for a command to run...

Oracle APEX already includes Font APEX as the default icon library for Universal Theme. In most cases, that is enough. But in one of my APEX apps, I needed a few icons that were not available there, s

APEX 26.1 has been updated to the Universal Theme. While much of the attention in this release is on AI features, I think the UT improvements are just as important for developers like me who care abou

The apex_barcode package offers a PL/SQL API to generate various types of barcodes. You can output barcodes as SVG (Scalable Vector Graphics) values or as PNG file blobs, making it easy to embed them

Oracle APEX makes it easy to get data on screen fast, but often, the default tabular output isn’t enough. What if you want to highlight statuses, add icons, or display badges all without writing compl

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.
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.
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.
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.