Styling Input components inside af:query using ADF Skin

Sharing is Caring

This another post (ADF Skin) is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn’t do the job

Here I am sharing a simple example of styling af:query input components, A typical af:query components looks like this

and to change DepartmentId selectOneChoice and ManagerId inputText’s content style we can use this CSS

af|query::criterion af|selectOneChoice::content {
    width: 207px;
    font-weight: bold;
    color:navy;
    padding:5px;
}
af|query::criterion af|inputText::content {
    width: 200px;
    font-weight: bold;
    color:red;
    padding:5px;
}

and after using this CSS af:query looks like this

Now changing labelStyle is a bit tricky, for that we have to inspect generated HTML code of component on the browser and find correct tag so that we can alter CSS of that tag

 

Now we have Id of the component and we know the tag that should be altered, Use this CSS to change label style of components

af|query label[for*='qryId1:oper0:']{
    color:#003194;
    font-weight:bold;
    font-family: cursive;
}
af|query label[for*='qryId1:oper1:']{
    color:#003194;
    font-weight:bold;
    font-family: cursive;
}

and output is


Cheers 🙂 Happy Learning

Related Posts

I’m an Oracle ACE, Blogger, Reviewer,
Technical Lead working on Oracle ADF

0 thoughts on “Styling Input components inside af:query using ADF Skin”

  1. Hi, thanks for your response. I`ve defined a lis of values for DepartmentId. When i use the default view criteria (all attributes) show as LOV, but I need create new view criteria with only departmentId as LOV and in af:query not show like LOV.

  2. luis

    If you have defined LOV in Department Id then it'll appear as SOC in af:query too and to show only one attribute in af:query you can create a new criteria and drop as af:query on page

    Ashish

Leave a Reply

Your email address will not be published. Required fields are marked *