Create Image Button in Oracle Apex 5

Question

How can i create Image Button in Oracle Apex 5 ? I am using Universal Theme in my application.

I have set Button Attributes as below.

But it display like this.

UPDATE

After using style="background-image:url(#APP_IMAGES#holidays.png);background-repeat:no-repeat;" in Button Attributes field, image display like this.

Instead of full image it displays cropped image.

How can I fix this issue ?

Answer 1

The button templates of the Universal Theme in APEX 5.0 are CSS icons only. If you need an image button for just a small number of buttons, use the "Text" button template and enter

<img src="#APP_IMAGES#holidays.png">

into the "Label" attribute of your button. If you want to have your own Image button template, go to Shared Components -> Templates and copy the existing "Icon and Text" button template and name it "Image and Text" and use the following HTML markup

<button class="t-Button t-Button--icon #BUTTON_CSS_CLASSES#" #BUTTON_ATTRIBUTES# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#"><img src="#ICON_CSS_CLASSES#"><span class="t-Button-label">#LABEL#</span></button>

Use the "Icon CSS Classes" attribute of your button to specify the image.

Hope that helps Patrick

Answer 2

You are trying to define the path to an image in a field used for specifying a CSS class. Either create a CSS class that defines your image and use that, or reference the image directly in the 'Button Attributes' field.

e.g...

.holidayButton {
  background-image:url(#APP_IMAGES#holidays.png);
  background-repeat:no-repeat;
}

or

style="background-image:url(#APP_IMAGES#holidays.png);background-repeat:no-repeat;"

You probably want to read up on CSS and have a play with some of the attributes in your developer tools whilst running your application in order to fine tune things. The MDN site is an excellent resource.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image