This discussion is archived
6 Replies Latest reply: Sep 19, 2013 12:55 AM by Geert01 RSS

Cannot get an Apex HTML region with table with a background image to resize image to fit table

Geert01 Newbie
Currently Being Moderated

I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.

 

Adding the following code to the html region:

 

<table class="tableWithBackground" width="300px" height="200px" border="1">

    <tr>

        <td>

            <img class="tableBackground" src="#APP_IMAGES#Demo.jpg">

            Hello

        </td>

        <td>

            World

        </td>

    </tr>

    <tr>

        <td>How are<br><br><br><br><br>you?</td>

        <td>I am fine</td>

    </tr>

</td>

 

Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image  demo. For some reason this does not work (the image is no longer visible).

 

Can anybody tell me how to achieve my goal?

 

Thanks in advance!

 

Geert

  • 1. Re: Cannot get an Apex HTML region with table with a background image to resize image to fit table
    fac586 Guru
    Currently Being Moderated

    Geert01 wrote:

     

    I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.

     

    Adding the following code to the html region:

     

    <table class="tableWithBackground" width="300px" height="200px" border="1">

        <tr>

            <td>

                <img class="tableBackground" src="#APP_IMAGES#Demo.jpg">

                Hello

            </td>

            <td>

                World

            </td>

        </tr>

        <tr>

            <td>How are<br><br><br><br><br>you?</td>

            <td>I am fine</td>

        </tr>

    </td>

     

    Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image  demo. For some reason this does not work (the image is no longer visible).

     

    Can anybody tell me how to achieve my goal?

    This is a workaround. What's your real goal? Why do you want to do this?

     

    What browser(s)/version(s) are you using? All current browser versions have support for CSS3 background sizing which is the proper way to do this.

  • 2. Re: Cannot get an Apex HTML region with table with a background image to resize image to fit table
    Geert01 Newbie
    Currently Being Moderated

    I am developing an application a want to use for the field hockey team of my daughter. At all times (in a match) I want to know who is playing in which position. In order to do so I have created a Hockyfield picture (my backgroud image) . On top of this Hockeyfield a want to draw a borderless table. In specific cells I want to show the picture of the girl playing in that position. Wihtout being able to automatically resize the background hockeyfield, I get different views of the hockeyfield depending on the way I hold my tablet. Also displaying this page on my iPhone alters the hockeyfield. Some times I only see the left part of the hockeyfield and on an other devise, or chaning the way a hold the tablet, I see 2 hockeyfields next to each other.

    Fortunately , the table and pictures of the girl is no problem. The table allways automatically alters to show what I want to see. It is only the background image that is not working like I want it to.

  • 3. Re: Cannot get an Apex HTML region with table with a background image to resize image to fit table
    Geert01 Newbie
    Currently Being Moderated

    Saving the above code to a test.html on my computer and viewing this in the same browser as I am using for viewing the Apex page, works fine. I do not think I has anything to do with the browser verion.

  • 4. Re: Cannot get an Apex HTML region with table with a background image to resize image to fit table
    Geert01 Newbie
    Currently Being Moderated

    After experimenting extensively I found that changing the display position of the HTML region to "After Header" the page renders as I want it to. But unfortunately this is an undesired position. Digging into the code of the page and the templates it uses, I found that the #TEMPLATE_CSS#  substitution code that inserts the

     

    <link rel="stylesheet" href="/i/themes/theme_25/css/4_2.css?v=4.2.3.00.07" type="text/css" />

    <link rel="stylesheet" href="/i/themes/theme_25/css/responsive_grid.css?v=4.2.3.00.07" type="text/css" />

     

    lines into to generated code is most likely causing the problem. This code somehow disables/deactivates the tableBackground class I want to be executed.

     

    Can somebody help me resolve this issue?

     

    Thank you.


  • 5. Re: Cannot get an Apex HTML region with table with a background image to resize image to fit table
    fac586 Guru
    Currently Being Moderated

    The best way to get help is to create an example on apex.oracle.com.

  • 6. Re: Cannot get an Apex HTML region with table with a background image to resize image to fit table
    Geert01 Newbie
    Currently Being Moderated


    By recreating an example of my problem in a new Workspace (on Apex.oracle.com)  I found that the problem no longer exists in the newly created workspace. The workspace I was using was imported from a workspace generated on my laptop with probably an older version of Apex (have not verified that yet). I am going to rebuild my application in the new workspace and I am confident that the problem no longer will arise.

     

    Thank you for your help!

     

    Regards Geert

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points