November 19, 2019 APEX, Oracle 4 Comments

Inspired from Material APEX theme to have Floating button in my application. But, I also do not want to migrate from Universal Theme. So, following is a simple tweak – which will convert your existing button into a floating button within Universal Theme.

Add following CSS into page header or in theme roller – which ever is your preference to use it.

.float{
  z-index:100;
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color: rgba(55, 76, 139, 0.81);
  color:#FFF;
  border-radius:50px;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
}
.my-float{
  margin-top:22px;
}

Open your existing button and make following changes

  • Set CSS Classes as “float my-float”
  • Change Button Template to “Icon”
  • Set Icon as “fa-plus”
That’s it, start using Floating Buttons in your applications. 🙂

Working Demo

Hope this helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com

, , , ,
Written by Jaydip Bosamiya