htmlcssoracle-apex

CSS in a Help Text for a page item gets applied to other page items in Oracle APEX

I have defined the following Help Text for a drop down list on a page in oracle APEX :

<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>
<table style="width:100%">
 <tr>
    <th>Category</th>
    <th>Description</th>
  </tr>
   
   <tr>
    <td>Category1</td>
    <td>Description1</td>
    
  </tr>
  
   <tr>
    <td>Category2</td>
    <td>Description2</td>
    
  </tr>
  
   <tr>
    <td>Category3</td>
    <td>Description3</td>
    
  </tr>
    
</table>
</body>
</html>

When I click the question mark to see the help text, the style gets applied to other page items on the page, and I have to refresh the page to reset the style. How can I fix this problem?

Solution

  • Give the element an id and only apply the styles to that id:

    <style>
table#your_id_value,
table#your_id_value th,
table#your_id_value td
{
  border:1px solid black;
}
</style>
<table style="width:100%" id="your_id_value">
 <tr><th>Category</th><th>Description</th></tr>
 <tr><td>Category1</td><td>Description1</td></tr>
 <tr><td>Category2</td><td>Description2</td></tr>
 <tr><td>Category3</td><td>Description3</td></tr>
</table>

    Or give the element a class:

    <style>
table.black-border,
table.black-border th,
table.black-border td
{
  border:1px solid black;
}
</style>
<table style="width:100%" class="black-border">
 <tr><th>Category</th><th>Description</th></tr>
 <tr><td>Category1</td><td>Description1</td></tr>
 <tr><td>Category2</td><td>Description2</td></tr>
 <tr><td>Category3</td><td>Description3</td></tr>
</table>

    Then elements without that id or class will not have the style applied to them.