Please disable your adblock and script blockers to view this page

Search this blog

Sunday 19 January 2014

Hiding search icon of af:inputListOfValues using CSS & ADF Skin

Hello All,
Hope all are doing good, this post talks about skinning inputListOfValues to hide its search icon (magnifying glass)
we can use the 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 the selected inputListOfValues component in an application, go to the source of CSS file and just write this code

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

  • Now go to the page and paste TagSearchIconHidden in StyleClass property of lov component to hide its 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 the application
 Cheers :-)

No comments :

Post a Comment