Skinning af:selectOneChoice

A question came in today about how to skin the selection button (Image of a drop down list)  of an <af:selectOneChoice>. If you have a delve in the ADF Skinning editor, you'll find that there are selectors for the selectOneChoice when in compact mode (af|selectOneChoice::compact-dropdown-icon-style), however, there is not a selector for the icon in the "normal" mode. I had a quick delve into the skinning source files that you can find in the adf-richclient-impl-11.jar and likewise there seemed to be no association there. However, a quick sample page and a peek with Chrome developer tools revealed the problem.  The af:selectOneChoice gets rendered in the browser as a good old <select> element (reasonable enough!). Herein lies the problem, and the reason why there is no skin selector. The <select> HTML element does not have a standard way of replacing the image used for the dropdown button.  If you have a search around with your favorite search engine, you can find various workarounds and solutions for this.  For example, using Chrome and Safari you can define the following for the select element:

select {
  -webkit-appearance: listbox;
  background-image: url(blob.png); 
  background-position: center right;
  background-repeat: no-repeat;
  }

Which gives a very exciting select box: Image of updated selectOneChoice .

Comments:

Thanks for providing the CSS hack.
But the fix is working in Chrome and Safari not in FireFox and IE
i have tried using @agent ie(for ie) and -moz-appearance: listbox;(for FireFox) but now luck.
Could you please help me in provide some input on this

Posted by guest on June 06, 2012 at 08:38 PM BST #

Here I've described how to deal with radiobuttons and checkboxes. http://notesaboutadf.blogspot.com/2012/06/cheboxes-and-radiobuttons.html

Posted by guest on July 03, 2012 at 01:26 PM BST #

Moreover in Firefox there is a css property -moz-appearance. But IE breaks all hopes.

Posted by guest on July 03, 2012 at 01:27 PM BST #

Thanks Alexandr - good article to link to.

Posted by Duncan on July 03, 2012 at 02:00 PM BST #

Post a Comment:
Comments are closed for this entry.
About

Hawaii, Yes! Duncan has been around Oracle technology way too long but occasionally has interesting things to say. He works in the Development Tools Division at Oracle, but you guessed that right? In his spare time he contributes to the Hudson CI Server Project at Eclipse
Follow DuncanMills on Twitter

Note that comments on this blog are moderated so (1) There may be a delay before it gets published (2) I reserve the right to ignore silly questions and comment spam is not tolerated - it gets deleted so don't even bother, we all have better things to do with our lives.
However, don't be put off, I want to hear what you have to say!

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today