Read Only Item Layout

The possibility to set the items conditionally to read only is one of the important security features in APEX. Using this feature you can secure your applications and it will not be possible to manipulate the protected item (region or page). The downside of this feature is that it will change the layout of the protected items to some kind of standard, ignoring the previous formatting in the "normal" mode. If you have a form which looks like this:

and change the description item to the read only mode, then the page will look a lot different and will be hard to control:

In such cases you can help yourself in different ways. Using some css or jQuery, you can make those read only items to appear only slightly different. For example, I used this code to change the layout of the description item on page load:

$('#P3_BP_DESC_DISPLAY').attr("readonly","readonly").css({"font-weight":"bold","color":"#ccc","display":"block","width":"240px"
,"height":"120px","overflow-y":"auto","border":"1px solid grey"})

and the result looked like this:

There are also some other more generic methods:

.display_only {font-weight:bold; color: #ccc; display: block; width: 200px}

$('[id*=_DISPLAY]').css({"font-weight":"bold","color":"#ccc","display":"block","width":"200px"})

$('.display_only').css({"font-weight":"bold","color":"#ccc","display":"block","width":"200px"})

The only thing you need to note is that setting an item to the read only mode will create two page elements. The displayed element will get the suffix _DISPLAY added to the corresponding item ID.

Enjoy.