Follow by Email

Sunday, 19 January 2014

ADF Skinning | Hiding search icon of af:inputListOfValues using CSS & StyleClass

Hello All,
Hope all are doing good, 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
 Cheers :-)

No comments :

Post a Comment