Posts

Showing posts with the label css

Oracle APEX - Interactive Report - Scrollbars on Top

Image
I have been came across an interested requirement ( which is very valid ) to add scrollbars on the top of the regions! I have seen many times when you want to scroll right to see further data of first few records, you will scroll vertically to get to the horizontal scroll-bars. And then you do horizontal scroll and then vertical scroll to go top of the region. Aren't you ??? :-) So, to ease the user interaction with IR - we should have a scrolling option somewhere on the top of the region ? - For Sure So, how can we add scrollbars on top of the report for an Interactive Report ? By default IR Fix the column headers to the page. This setting gives us an opportunity to add scroll-bars just below the column header as well. Just by adding following CSS line you should get a beautiful scroll-bars just below you header and it works really great as well. #MYIR .t-fht-thead{   overflow: auto !important; } I am also trying to find a way to add same function...

Oracle APEX Universal Theme - Floating Action Button with List Template

Image
In continuation to my previous blog post about adding simple floating button . This blog is about how you can create a list template that will render as a Action Floating Button. Following are the steps: Add below CSS code to your page header or theme roller section - which ever is your preference. .zoom {   z-index:100;   position: fixed;   bottom: 45px;   right: 24px;   height: 70px; } .zoom-fab {   display: inline-block;   width: 40px;   height: 40px;   border-radius: 50%;   background-color: #009688;   vertical-align: middle;   text-decoration: none;   text-align: center;   transition: 0.2s ease-out;   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);   cursor: pointer;   color: #FFF; } .zoom-btn-sm > span{   margin: 10px; } .zoom-fab:hover {   background-color: ...

Oracle APEX Universal Theme - Simple Floating Button

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.co...
My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)