June 23, 2016

Just one Elastic applet?

Oracle introduced wonderful elastic list applets with IP16,  this feature shrinks list applet size if there are no or less records needs to be displayed. However this doesn't always looks nice, specially in MVG applets and pick applets.
Default Elastic Applets in IP16
 
This feature can be turned off by setting "Enable Elastic Grid" system preference, but it is turned off for entire application. That makes me think is there any way we can make only one applet as elastic applet?  Answer is yes :)

Neel on Siebel Unleashed published beautiful trick to back port elastic applets into IP15. Absolutely splendid! This trick can be extended to make only few applets Elastic. 

To make all list applets Elastic add following in custom CSS file:
.ui-jqgrid-bdiv{max-height:340px !important; height:auto !important;}
To make only one applet Elastic (After turning of the system preference) add following CSS :
div[title="Line Items List Applet"] div.ui-jqgrid-bdiv { height: auto !important}

By preceding another div selector to the CSS rule we can instruct browser to apply CSS style only if applet name is : "Line Items List Applet". One can use this trick to change other UI attributes for specific applets and apply different styling.


Happy Styling :)

5 comments :

  1. Glad you like it muddana, cheers!

    ReplyDelete
  2. Hi Jim, Can you please elaborate how to use it for a specific applet only.
    div[title="Line Items List Applet"] div.ui-jqgrid-bdiv { height: auto !important}

    Line Items List Applet --- means title of the applet or name of the applet from the tools? Please clarify it. Thanks in advance.

    ReplyDelete
  3. Hi,

    Thank you for this article.

    I have a query. In IP2014, the below code does not work:

    div[title="Order Entry - Order List Applet (Sales)"] div.ui-jqgrid-bdiv { height: auto !important}

    Do we need to do something different for IP2014?

    Thanks in advance.

    ReplyDelete
  4. How would you achieve the opposite.. Enable Elastic Grid (parameter set to Y), but disable Elastic Grid for certain applets - Eg. the Account Summary screen has 6 summary applets where it makes sense to have them displayed neatly with even height, otherwise it's all misaligned?

    ReplyDelete