Skip to Main Content
Forums

Java Development Tools

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

af:query Heading background change

tkondaveJul 24 2015 — edited Jul 24 2015

Hi All,

I am using JDev 12.1.3.0.0. I have a <af:query/> in my jspx page.

I want to move Advanced button to the bottom of the Advanced Search, But if do this by using af|query div[id$='_mode'] the total div is moving down(with header and SavedSearch...). Could anyone tell me the solution how can i move only the Advanced button to down and also how to add background for Search header(like PanelBox) as per the following image.

af-query.png

Thanks,

Tharak.
This post has been answered by Ruben Rodriguez on Jul 24 2015
Jump to Answer

Comments

Florin Marcus

There is no control over position of "Advanced" link.

But maybe you can do it though MDS seeded customisations.

Please see a series of blogs on this matter:Andrejus Baranovskis Blog: MDS

Ruben Rodriguez

Hello,

can you please share with us your af|query div[id$='_mode'] css code?

regards,

Ruben.

tkondave

af|query div[id$='_mode']{   

    background-color:red !important;

    margin-top: 100px;

}

It applies red color to the advanced button. but if i move the position of advanced button, along with that button the search criteria also moving down.

Thanks,

Tharak.

Ruben Rodriguez

Hello,

You can try to move it down with something like this:

af|query div[id$='_mode']{  

    position:relative;

    top: 50px;

}

regards,

Ruben.

tkondave

Hi ,

Now it's moving advanced button correctly(functionality is not working, it is not firing the action) if i remove position:relative; then it's working. Can you help in getting the same look for the Search Panel heading(that background like PanelBox) , as it is there in the screenshot.

Thanks,

Tharak.

Ruben Rodriguez

Hello,

Advanced button is not working because is there is a layer on top of that div. You will have to use a z-index to put it on top (e.g. z-index:1;).

Using af|query::title-table selector i am not able to change the background so to edit the header background you can try something like this:

af|query table[class*='title-table']{

    background-color: red;

}

regards,

Ruben.

tkondave

Hi Ruben,

Thanks a lot for your help.it's working. Can you help me in moving that SavedSearch also to the bottom as per the image. And also how can we find the exact syntax for the css, like

af|query table[class*='title-table']{

    background-color: red;

}

Thanks,

Tharak.

Ruben Rodriguez
Answer

Hello,

If you inspect the code generated when you run the page you can see the id/class of the component you want to edit the style.

In this case the header is a table with "af_query_title-table1" class.

With table[class*='title-table'] you are getting the table whose class contains 'title-table'.


If you want to move saved seach, by inspecting the page you can see that the id of the table generated is "qryId1::saveSrch", so you can edit it's style like this:


af|query table[id$='saveSrch']{

    // put your style here

}

regards,

Ruben.

Marked as Answer by tkondave · Sep 27 2020
1 person found this helpful
tkondave

Hi Ruben,

The following code will apply style only on mouse over on the component , did i miss any thing.

af|query div[id$='_save']{   

    background-color:red !important;

    color: White;

}

Thanks,

Tharak.

Ruben Rodriguez

Hello,

This is working for me, not only on hover:

af|query div[id$='_save']{  

    background:red !important;

    color: White;

}

background-color is not working for me, i have to use background property instead.

regards,

Ruben

tkondave

Hi Ruben,

In IE9 even if i use, background instead of background-color it is not applying the style(only on mouse over it is applying the styles). But in FF it works fine.


Thanks,

Tharak.

Ruben Rodriguez

Hello,

I have test on the latest versions of IE, FF and Chrome and it is working, I will try to check later with IE9.

regards,

Ruben.

1 - 12
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Aug 21 2015
Added on Jul 24 2015
#application-development-in-java, #jdeveloper-and-adf
12 comments
2,090 views