Single Article

Style APEX popup key LOV text field

Category APEX and jQuery

APEX Popup Key LOV is useful if you have big list of values. But by default text field not look so nice as field background is grey.

Here is how you can style popup key LOV field and add placeholder to inform user e.g. click icon to select value.

If you are on APEX 3.x you need load jQuery library on page HTML header.

Create popup key LOV to your page and add page HTML header

<script type="text/javascript">
$(function(){
 $("#Px_MY_ITEM").blur(function(){
  setPlaceholder(this);
 }).css({
  "height":"17px",
  "color":"#777",
  "background-color":"#FFF",
  "border":"1px solid #AAA",
  "padding-left":"3px"
 }).blur(); 
});
function setPlaceholder(p){
 if(!$v(p)){
  $s(p,"Click icon to select ->");
 }
}
</script>

 

Change Px_MY_ITEM to your popup key LOV item name.
If your allow select null value from popup add to item HTML Form Element Attributes


onchange="setPlaceholder(this);"

This is needed to set place holder text when null value is selected.

See working example.

Social Buttons

Comments

No comments yet on this article.

Global Right Column

Search

Archives

Subscribe in a Reader