ADF Bug or Feature? Non-Breaking Space outside required icon style

Tested with JDeveloper: 11.1.2.1.0

In this post I am going to describe a limitation I hit while skinning the alignment and positioning of the required Icon.

The desired end result should be as following

To get there we have an ADF weapon called skinning. So we create a skin css file and style the following selectors

Having done that we start the application and will notice that in case of required fields the result is still not really what expected:

OK, since the required icon container (span) can be referenced by css selector we should be able to move that required icon on the left side. This can be done by the following css

Refreshing the page in the browser the form layout looks close to the target result

Except the blank before Lastname. Did you notice? Having those blanks in forms with more fields the overall design looks pretty poor / messed up! So where does the blank comes from?

Inspecting through Firebug (1.9.0), everything seems OK. I cannot see any pointer for the blank.

BUT, looking on the raw HTML code you will see a non-breaking space in case the required="true" or showRequired="true" is set on the components

This nbsp is really annoying since  it is not possible to select this one by CSS. At least I have not find a way to remove that by CSS.

So is it a bug or a feature? I would say it is a bug since it is not easy (or even not possible) to influence the position of the nbsp. It is not enclosed e.g. in the span for the required icon style and therefore not selectabl by CSS. Why isn't it generated like

Everything would be fine.

WORKAROUND

In order to get the desired alignment

I wrote a ServletFilter, wrapped the HTTPServletResponse to buffer the response, process the filter chain and filter the buffered response like

public void doFilter(ServletRequest request, ServletResponse response,
                        FilterChain chain) throws IOException,
                                                  ServletException {

       HttpResponseCharBufferWrapper wrapper =
           new HttpResponseCharBufferWrapper((HttpServletResponse)response);
        
       chain.doFilter(request, wrapper);
        
        
       String filteredResult = wrapper.toString();
       filteredResult = filteredResult.replaceAll("> ", ">");
        
       response.getWriter().write(filteredResult);
   }

(Don't forget to register the filter in web.xml)

The nice thing about that workaround is, that you can implement what ever content filter rules you want/need. On the con side there is for sure more memory consumption.

TO SUMMARIZE

DISCLOSURE

I know that the provided workaround is really dirty and I personally do not like it! I will file an ER/SR at My Oracle Support and the ADF EMG Defect tracker (http://java.net/projects/adfemg)

If anyone knows of a cleaner and better workaround, let me know. Maybe some niffty CSS Hack (I have not found yet) could do the trick. (:after? content?) Any comments are welcome.

DOWNLOAD

(Jdev 11.1.2.1 workspace)

https://www.box.com/s/c93ca49d34e42746491b