Button with image

Button with image

  
Hi,

when i insert a default outsystems button, it creates an input tag, and i can't really customize my button as i'd want. For example, in html i have a button created this way :
<button class="button_colour round_all btn_smaller"><img height="24" width="24" alt="Bended Arrow Right" src="images/icons/small/white/Paperclip.png"><span>Associar Projecto</span></button>

I was wondering, is there a way i can do this with outsystems buttons too?
Hi Hugo,

Can't you use an image with an OnClick property that executes an action?
You can't configure the Inputs the same way you described, but you can use an unescaped expression to write directly that html code if you want.

Regards,
hd
I've tried using this as an expression, but then i loose some easy functionalities i have with default buttons. Like now, i have some buttons that are disabled if something is null, how could i have that using expressions?
Humm.. 

You can have an hidden button (that will behave like a default button) and then click on that button with javascript (image OnClick="osjs('#"+ button.id+"').click()" ~ something like this).
This way you can also control the image you want to show if it is disabled.

HD
Ok. This is the way i'll do it. Thank you.
Hello,

You could also make an css style for a button. For you're example the button style will be:

.btn_Paperclip {
border: none;
background: url('img/icons/small/white/Paperclip.png') no-repeat;
width: ??px;
height: ??px;
cursor: pointer;}

Then you can apply the btn_paperclip style on you button and the images will be shown and not the default button. By this you keep all the settings of the OS button but don't need a javascript onclick.

Kind regards,
Evert
Hi Evert
Your solution seems to be the correct way to go.
But it might be a bit more difficult to control if you want to toggle between images (enabled/disabled), don't you think?
I'm not a css expert :)

Thanks
Hélio Dolores wrote:
But it might be a bit more difficult to control if you want to toggle between images (enabled/disabled), don't you think?

 No :).

Just simply add the following css style:

.btn_Paperclip:hoover {
border: none;
background: url('img/icons/small/white/Paperclip_o.png') no-repeat;
width: ??px;
height: ??px;}

Notice the red parts (:hoover and_o in the image filename). Works like a charm :)

Kind regards,
Evert
Humm I think you wanted to show this one:

input[disabled] { ... }
instead of the hover :) I have to learn a bit more about CSS.

Thanks again for your contribution Evert.
 
Hélio Dolores wrote:
Humm I think you wanted to show this one:

		input[disabled] { ... }
instead of the hover :) I have to learn a bit more about CSS.

Thanks again for your contribution Evert.
 
 
 Hello Helio,

Didn't showed the wrong one, misunderstood the question so showed the wrong answer :).

What you say is correct, you can make you own button enabled/disabled style :
.btn_Paperclip[disabled="disabled"] {
 background: url('img/icons/small/white/Paperclip_dis.png') no-repeat;
 cursor: not-allowed; } 

(note that the not-allowed cursor isn't working in IE, but it looks nice in FF or Chrome :) ).

Please be aware of the security issue of a disabled button. With the browsertool is easy to enable a disabled button. So always make shure a check is made in the action of the button (or prep in case of next screen).

Kind regards,
Evert
Yes i could do it that way too, but that way has a disadvantage. I have to have all my buttons as images, and have to create a css class for each. That would enlarge my css big time. Thanks for your solution but for my question, since outsystems will not allow me to edit buttons, i think i'll just stay with javascript. Thanks for everyone help.