Forum | Appery.io

In Appery, can we make buttons such as this example from ADP? Each cell has graduated shading, custom icons, the button/clickable area is the entire grid cell (not just the standard button)...

-thanks

(I copied the picture from: https://itunes.apple.com/us/app/adp-m... )

Hi, you can... It needs to be done with custom CSS.

Hi Brian!
To create buttons, as you want, you should set Properties for Buttons:
Inline: checked
Icon: None
Text: Keep empty

push More Properties - add "padding" with value=0

Next changes will not visible in Appery Editor, but they will be in preview and application:

Add event "Load" on page with buttons, and set Action "Run JavaScript"
add next JavaScript:
pre
Appery("mobilebutton_1").css("background-image", 'url(' + Appery.getImagePath('logo') + ".jpg" + ')');
/pre
where "mobilebutton_1" - name of your button
"logo" - name of image asset
"jpg" - extension of image asset.

I got this working. Was wondering how to remove the borders?

Hi Alva,

It very depends on your implementation.

Please show us your app public link and describe steps to see this page.

We will take a look.

Regards.

Here's an image of the buttons. I didn't change the background on these buttons but you can see the borders around the buttons. How do I remove those borders?

Hi Alva,

You need to apply CSS style for your buttons:

pre

border: 0px solid #fff;
box-shadow: 0 0 0;

/pre

Regards.

Thanks. I got it working. For others ...

var filename = '4c258a62-b7f9-40aa-a4e2-44e0db35962b.image.jpg';
var photo_url = myDB_settings.photo_url + myDB_settings.database_id + '/' + filename;

// method 1
Appery("mobilebutton_1").css("background-image", 'url('+photo_url+')');
Appery("mobilebutton_1").css("border", '0px solid #fff');

// method 2
var cssObj = {// custom css for icon
'background': 'url("'+photo_url+'") no-repeat transparent',
'border': '0px solid #fff'
}
Appery("mobilebutton_2").css(cssObj);