Forum Stats

  • 3,728,222 Users
  • 2,245,576 Discussions
  • 7,853,386 Comments

Discussions

af:query Heading background change

tkondave
tkondave Member Posts: 67 Blue Ribbon
edited July 2015 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 July 2015 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

Answers

  • Florin Marcus
    Florin Marcus Member Posts: 553 Silver Badge
    edited July 2015

    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 July 2015

    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 July 2015

    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 July 2015

    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 July 2015

    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 July 2015

    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 July 2015

    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 July 2015 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 July 2015

    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 July 2015

    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
    tkondave Member Posts: 67 Blue Ribbon
    edited July 2015

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited July 2015

    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.

This discussion has been closed.