Follow by Email

Thursday, 10 November 2016

ADF Skinning: Styling Input components inside af:query


This another post is about af:query skinning , previously I have posted about changing 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 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

4 comments :

  1. Hi, I have one question about af:query. How can I show DepartmentId as SelectOeChoice by default? Thanks and regards

    ReplyDelete
    Replies
    1. You need to define list of values for DepartmentId in your View Object.

      Delete
    2. 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.

      Delete
  2. Where is the css file located?

    ReplyDelete