Forum Stats

  • 3,759,890 Users
  • 2,251,611 Discussions
  • 7,870,857 Comments

Discussions

¿How can I apply a background gradient in an af|document?

User_BBKCX
User_BBKCX Member Posts: 10 Green Ribbon

Hi all.

On the page currently under development, try to apply a color gradient on the ADF skin:

background-image:linear-gradient(360deg, rgba(0,13,62,1) 0%, rgba(2,22,93,1) 37%, rgba(0,29,107,1) 74%, rgba(0,38,100,1) 100%);

but it displays repeated:

and apply background-repeat:no-repeat;

but it comes out in very small dimension:

Could you help me please.

Thank you.

Best Answer

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,566 Red Diamond
    Accepted Answer

    Then the problem is that the region will overwrite the remaining part of the page.

    Try with a fresh page only having an af:document and an af:form. Then the whole page should show the gradient.


    To make it work in your real case, you need to change the skin and make the background of the region transparent. This needs to be done to each components that overwrite the background.


    On the other hand, gradients should be avoided anyway as they show down the rendering on the page.


    Timo


Answers

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,566 Red Diamond

    User, tell us your exact JDev version, please!

    Try using a webkit selector like

    background: -webkit-linear-gradient(top, #4a85c5, #de1010);
    

    And you might want to add this to the first layout container (e.g. af:form) on the page.

    Timo


  • User_BBKCX
    User_BBKCX Member Posts: 10 Green Ribbon

    The following is applied 

    background: -webkit-linear-gradient(top, #4a85c5, #de1010);

     and it is displayed as follows:

    as it was added in the first design container, how could I make it to occupy the full width and length of the background now?

    the version I am working on is JDev version: 12.2.1.4.0

    Thanks.

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,566 Red Diamond

    What is the first layout container in your case?


    Post the page code here, please.


    Timo


  • User_BBKCX
    User_BBKCX Member Posts: 10 Green Ribbon

    the code is the following:


  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,566 Red Diamond

    Have you applied the style to the af:form?

    If not try that.


  • User_BBKCX
    User_BBKCX Member Posts: 10 Green Ribbon

    Yes, and it visualizes me as in the previous image.


  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,566 Red Diamond
    Accepted Answer

    Then the problem is that the region will overwrite the remaining part of the page.

    Try with a fresh page only having an af:document and an af:form. Then the whole page should show the gradient.


    To make it work in your real case, you need to change the skin and make the background of the region transparent. This needs to be done to each components that overwrite the background.


    On the other hand, gradients should be avoided anyway as they show down the rendering on the page.


    Timo


  • User_BBKCX
    User_BBKCX Member Posts: 10 Green Ribbon

    Thank you for your prompt response to my query, 

    it was very useful to me the advice and comments to the problem that was presented, in the end giving as a result with some tests I got to use an image as the gradient which did not overwrite the background by the components used, and that in our skin used it is possible to apply the background properties to a class assigned to the af:document:

    .documentDazStyle{

    background-image: url("images/af_document/af_document.png");

    background-size:200.0%;  

    }

    In my case, it corrected the problem, but I agree that it is advisable to avoid I agree that it is advisable to avoid gradients. 

    Thanks.