How to make a glyphicon clickable on a button

Question

In my native Notes development I have a button on which I have defined a icon from the resources. Then in the have an onclick event. Want to make this a bootstrap button with an onclick so I add a link action to it that performs the action. If I add text to the link that displays in the button then when I click on the text the action takes place but I just want the glyphicon and make it the clickable part of the button

<div class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:link id="expandLink" >
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="thisValue">
            <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
        </xp:eventHandler>
    </xp:link>
</div>

if I change it and add the text to the link it works but only if I click on the text:

<div class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:link id="expandLink" text="Expand">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="thisValue">
            <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
        </xp:eventHandler>
    </xp:link>
</div>

If I have to add the text then the icon is kind of unnecessary.

Is there a way to add a glyphicon to a link to make the icon clickable or ????

score 1 · Accepted Answer · answered Jul 29 '15 at 07:09

1

You can add the Glyphicon to a xp:button. Try something like this:

<xp:button value="Expand" id="button1" styleClass="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="thisValue">
        <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

answered Jul 29 '15 at 07:09

Per Henrik Lausten

21,331
3
29
76

That did it perfectly. I removed the button value="Expand" and now I have just the icon and it is clickable. Thanks Again! – Bill F Jul 29 '15 at 14:24

score 0 · Answer 2 · answered Jul 28 '15 at 22:27

0

There is an xp:span component, which should allow you to add an eventHandler to it. Maybe if you use that and an xp:text instead of an xp:link, it will achieve what you want.

answered Jul 28 '15 at 22:27

Paul Stephen Withers

15,699
1
15
33

as I was working on this I can add an icon to an xp:link and that does exactly what I want, but can't see how to add a glyphicon as when you select an icon it would appear that it can only be an image from the resources. I have a workable image but would like to use a glyphicon. – Bill F Jul 28 '15 at 23:19
The term "glyphicon" is a misnomer. I think of it like Wingdings, it's a font where, for each "letter" the configuration of pixels makes an image instead of a letter (after all, a digital letter is only different to an image because we call those particular configurations of pixels "letters"). – Paul Stephen Withers Jul 29 '15 at 07:52

How to make a glyphicon clickable on a button

2 Answers2