Monday 16 October 2017

Change loading icon in oracle APEX with just CSS

Okay so how can we change the loading(indicator) icon which is given by Oracle Application Express(5.0,5.1.*) with just CSS only yeah you heard me right with just a simple CSS.

Let's dig into it a bit more. Assume we already have loading indicator icon on some of the page of our Oracle APEX application if we inspect it it will have a class u-Processing  we will grab that class and modify css based on our requirement.


1) Here we are going to hide the Loading icon with transparent color

.u-Processing { content:  "<div class=\"Name2\"></div>" !important;
    height: 10% !important;
    width: 30% !important;
    cursor: text !important;
    border-radius: 0% !important;  
    background-color: transparent !important;
    z-index: 1000 !important;
}


2)Then in second step we actually going to append our text before loading icon comes

.u-Processing:before{ content:  'Please wait...' !important;
    height: 10% !important;
    width: 50% !important;
    cursor: text !important;
    border-radius: 0% !important;
    font-size: 200%  !important;
    background-color: White !important;
    z-index: 1000 !important;
}

Here i have created a DA which fires on page load which will refresh our region on same page.

So lets see how it looks....


Note* : For someone who does not know why i have used !important please continue reading.

It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

a {
    /* css */
}
Is normally overruled by:

body div #elementID ul li a {
    /* css */
}
As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the 'more-', or the 'less-', specific selector as it's always more specific.

If, however, you add !important to the less-specific selector's CSS declaration, it will have priority.

P.S. : Use !important only when necessary.

YouTube : https://youtu.be/BkQVrjXPj74




4 comments:

  1. Nice article.I used this approach and it is working for me.

    ReplyDelete
  2. Hi Pranav,

    Yeah,very nice article. I have a doubt regarding the text as loading icon('Please wait...' ).

    Is it possible to add the text dynamically like ('Hello &APP_USER, Please wait...') ?

    Thank you.

    ReplyDelete
    Replies
    1. You can try https://stackoverflow.com/questions/10495243/how-change-content-value-of-pseudo-before-element-by-javascript where you will find how to achieve the same.

      Haven't test though but it should work

      Delete

Show values in right side of shuttle

While working with select list and shuttle, when we want to display values into right side of shuttle depending upon selection from select ...