Forum Stats

  • 3,770,519 Users
  • 2,253,130 Discussions
  • 7,875,493 Comments

Discussions

af:query Heading background change

tkondave
tkondave Member Posts: 67 Blue Ribbon
edited Jul 24, 2015 8:51AM in JDeveloper and ADF

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.

Florin Marcus

Best Answer

  • Ruben Rodriguez
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 7:06AM Accepted 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.

    Florin Marcus
«1

Answers

  • Florin Marcus
    Florin Marcus Member Posts: 553 Silver Badge
    edited Jul 24, 2015 3:03AM

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 3:13AM

    Hello,

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

    regards,

    Ruben.

  • tkondave
    tkondave Member Posts: 67 Blue Ribbon
    edited Jul 24, 2015 4:46AM

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 5:02AM

    Hello,

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

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

        position:relative;

        top: 50px;

    }

    regards,

    Ruben.

  • tkondave
    tkondave Member Posts: 67 Blue Ribbon
    edited Jul 24, 2015 5:23AM

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 5:37AM

    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
    tkondave Member Posts: 67 Blue Ribbon
    edited Jul 24, 2015 6:58AM

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 7:06AM Accepted 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.

    Florin Marcus
  • tkondave
    tkondave Member Posts: 67 Blue Ribbon
    edited Jul 24, 2015 8:10AM

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 8:23AM

    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

This discussion has been closed.