Brian6028327
Posts: 0
Joined: Tue Jul 09, 2013 1:21 pm

Buttons in a grid with custom icons?

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... ) Image

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Buttons in a grid with custom icons?

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

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Buttons in a grid with custom icons?

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.

Alva
Posts: 0
Joined: Mon Dec 08, 2014 6:58 pm

Buttons in a grid with custom icons?

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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Buttons in a grid with custom icons?

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.

Alva
Posts: 0
Joined: Mon Dec 08, 2014 6:58 pm

Buttons in a grid with custom icons?

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?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Buttons in a grid with custom icons?

Hi Alva,

You need to apply CSS style for your buttons:

pre

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

/pre

Regards.

Alva
Posts: 0
Joined: Mon Dec 08, 2014 6:58 pm

Buttons in a grid with custom icons?

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);

Return to “Issues”