Search code examples
cssoracle11goracle-apexoracle-apex-5

Create Image Button in Oracle Apex 5

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.

Button Attributes

But it display like this.

display

UPDATE

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

updated_img

Instead of full image it displays cropped image.

How can I fix this issue ?

Solution

  • 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