Hello All,
Hope all are doing good, this post talks about skinning af: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?
- af:inputListOfValues looks like this in ADF Faces
- I have created a page and dropped 2 inputListOfValues on page
- There are 2 types of requirement about hiding search icon
- Hide icon of all inputListOfValues(LOVs) available on page or application
- Hide icon of some selected fields
- To do this we have to create a CSS (skin) in application
- Give the relevant name of CSS file and set this file as default skin of the 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 🙂 Happy Learning
Very nice !