How to add custom image on Navigation List in Oracle APEX 19.2?

Question

can anyone help me? I would like to show Custom Image (the images uploaded in static file ) in the List. I've already tried it in the by (shared components/list/(Image/Class) /#APP_IMAGES#ad.png)

but that not working fine , how i can do that in below list or how i can add new icon in icon file ?

please any advise .

Answer 1

The following steps were tested on APEX 19.2.

1. Resize your image to 16px square. The CSS used to add the image will not allow the image to be resized via CSS, so this needs to be done ahead of time. You could choose a different image size, but that would require adjusting other aspects of the menu. See the notes at the bottom about this if needed.
2. Upload the image to the Shared Components and get the URL from the Reference column in the report. You can use either Static Application Files or Static Workspace Files depending on your needs. I used Static Application Files and the URL was: #APP_IMAGES#dm-16.jpg
3. Go to Shared Components > Lists. Select the list you'd like to work with and then drill down into the list entry where you'd like to display the image. In the Image/Class field, add a custom class that you can use to target the element. I used: dm-16

4. Go to the page where you have the button setup to open the menu. If you don't already have this setup, you can use this as a guide. Go into the page-level attributes and add the following CSS to the Inline filed in the CSS section:

   .dm-16:before {
     content: url(#APP_IMAGES#dm-16.jpg);
   }
   

   The CSS is selecting the class from step 3 and setting the content attribute using the value from step 2.

When you run the page you should see something like this:

Here are some notes about using larger images... There's a span that wraps the span with the image and has a class named a-Menu-statusCol. That element has its width attribute set to 32px. This is because its left and right padding are set to 8px each (16px total) so when you add the image at 16px the total width becomes 32px.

Let's say you want to use an image that's 32px wide. You'd need to take the padding (16px) and add the width of the image (32px) and set the span's width to that total. In my example that was 48px. I added the following CSS to the same inline attribute in the page:

.a-Menu-content .a-Menu-statusCol {
  width: 48px
}

After that, you'll see that the image doesn't align correctly with the text anymore. This is because the text is in an 'a' element that has its line-height set according to the previous image size. Again, the height is being driven by the span with a class named a-Menu-statusCol. It has top and bottom padding of 10px each (20px total). If you add the default image height (16px) the total comes to 36px, which is what the line-height of the 'a' element is set to. If you add an image with a height of 32px, you'll need to add 20px to that to get a total of 52px. I set the 'a' elements light-height to that value with the following CSS on the same page:

.a-Menu .a-Menu-item {
  line-height: 52px;
}

As you can see, the image is now bigger. It doesn't line up with the icon below it as I've not added a larger image to that list entry.