ads

X

Wednesday, March 26, 2014

Hiding search icon of af:inputListOfValues using CSS & StyleClass -Oracle ADF

This post talks about skinning inputListOfValues to hide it's search icon (magnifying glass)
we can use auto suggest feature in inputListOfValues so if we don't want to display that default search icon then what to do ?


  • inputListOfValues looks like this in ADF Faces
  •  I have created a page and dropped 2 inputListOfValues on page

  •  there is 2 types of requirement about hiding search icon
    1. Hide icon of all inputListOfValues(LOVs) available on page or application
    2. Hide icon of some selected fields
  • to do this we have to create a CSS (skin) in application
  • give relevant name of CSS file and set this file as default skin of application



  • Now to hide icon of selected inputListOfValues component in application, go to source of CSS file and just write this code
     

  • .TagSearchIconHidden af|inputListOfValues::search-icon-style
    {
    display: none;
    } 
    

  • Now go to page and paste TagSearchIconHidden in StyleClass property of lov component to hide it's icon, run your page and see, i have done this in my first LOV

  •  Now to hide icons of all lov component just change CSS file with this script

  • af|inputListOfValues::search-icon-style
    {
      background-image: none; 
    }
    

  • Now no need to set StyleClass, it is applicable to all lov components of application