Friday 6 May 2016

Troubleshooting read only selectOneChoice content alignment issue

While using an ALTA UI with JDeveloper 12c (12.2.1) I have noticed the following misbehavior.





As you can see, when selectOneChoice component is set to read only, the label and the content are misaligned.

This can be resolved by surrounding the component with panelLabelAndMessage component (set the label of panelLabelAndMessage to the label selectOneChoice and set simple the attribute of selectOneChoice to true (simple=true). But this approach is much time consuming, so this has to be addressed by skinning the component.

Add new skin into your project, to make troubleshooting easier add

   
        If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.
        org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION
        true
   
   
        No obfuscation of CSS.
        org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
        true
   

into your web.xml file. The description is here http://docs.oracle.com/cd/E21764_01/user.1111/e21420/adfsg_apply.htm#ADFSG312

The second parameter DISABLE_CONTENT_COMPRESSION is essential as if you do not set it, you won't see "human" readable tags while you troubleshoot the issue with FireBug or similar skin inspecting tools.

So when the page is rendered, you inspect the component under the question and you shall see the similar picture.








If you make changes to

.af_selectOneChoice.p_AFReadOnly .AFPanelFormLayoutContentCell {
    padding-left: 12px;
}

and add padding-top: 10px;

This will fix the issue, to make it a permanent fix add the following into your skin file.

af|selectOneChoice:read-only .AFPanelFormLayoutContentCell {
    padding-top: 8px;
}

And here is the result





P.S. Reset back CHECK_FILE_MODIFICATION and DISABLE_CONTENT_COMPRESSION to their default values when you deploy your application to production.




No comments:

Post a Comment