#1 2016-03-11 14:15:59

impulsmedia
Member
Registered: 2015-04-21
Posts: 64

button with image as background AND a centered subtitle

Hi to all,

I just redesign part of may app and now want to use buttons / images  with a dynamic subtitle, i.e. I have a flat icon for visitors and want to have a text like "VISITORS" below it - corresponding to the language the user has choosen. There are different solutions and tutorials with HTML and CSS, but I wonder if there is a more comfortable way in AppBuilder i.e using SetAttribute or SetProperties?   
Thanks for your help.
regards,
Walter

Offline

#2 2016-03-11 15:46:51

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: button with image as background AND a centered subtitle

Hello Walter,

Are you tried with an HTML control using some of the available font-icons inside? Take a look at the below app sample to get an idea about this approach:

IconSample.zip

Probably we can take a similar approach using IMG tags inside the HTML control. However, we can also try with an Image control with a Label or HTML control below (for the image label).

Because we need to start with something, take a look at the above attached sample and tell me what do you thing about Walter.

Offline

#3 2016-03-11 17:45:15

impulsmedia
Member
Registered: 2015-04-21
Posts: 64

Re: button with image as background AND a centered subtitle

Hello David,
thanks for your sample. The HTML control is quite nice and works fine. But I would prefer a image control, because I now use it my code and  I scale and re-position it, if the resolution is changed ... . I just would have to label it with a [variable.value]
Thanks

Offline

#4 2016-03-11 17:47:21

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: button with image as background AND a centered subtitle

Hello Walter,

I think you must to use a Label or HTML control along the Image controls. That is, just positioning that label or HTML control (to show your image's label) below the Image controls. You can use Image control events like "MouseEnter" and "MouseLeave" to change the appropiate label, or just set the label with the appropiate text, depending on the app's language.

You found some problems with an approach like that  Walter? I am missing something?

Offline

#5 2016-03-11 18:12:40

impulsmedia
Member
Registered: 2015-04-21
Posts: 64

Re: button with image as background AND a centered subtitle

Hello David,

yes I think I will use a Label control, thats is the best way. Thanks!

Offline

#6 2016-03-11 19:38:59

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: button with image as background AND a centered subtitle

Hello Walter,

Anyway, if you get stuck or something like that, just post it here! smile

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.