6

I am using twitter bootstrap css to style. To make icon buttons in it, the standard way is to use "i" tags. <button type="submit"><i class="icon-search"></i></button>.

But I cant enter it within <h:commandButton id="myid"><i class="icon-search"></i></h:commandButton> How can I add HTML within the rendered <h:commandButton> ?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Sasinda Rukshan
  • 439
  • 1
  • 5
  • 14

2 Answers2

12

You can add <i class="icon-search"></i> inside h:commandLink

Command link could be styled as button

<h:commandLink id="btnsearch"
    action="search.xhtml"
    styleClass="btn btn-default">
    <i class="icon-search"></i> Search
</h:commandLink>
n1k1ch
  • 2,594
  • 3
  • 31
  • 35
  • 3
    I found that using this solution, since it renders an anchor-tag, the form does not submit on enter. Other than that it's a good solution. – baron5 May 12 '14 at 09:53
  • If you use this solution combined with balusC's answer in this http://stackoverflow.com/questions/5485851/jsf-default-action-to-execute-when-pressing-enter-in-a-form The enter key will work too. – baron5 May 13 '14 at 06:05
1

I just used a hack for now. It's like this (I hid the h:commandButton and added a new submit button).

<h:form id="myFrm" >
   <h:inputText id="search" value="#{user.name}"></h:inputText>
   <h:commandButton id="btnsearch" action="search.xhtml" style="display: none"></h:commandButton>
   <button  type="submit" id="myFrm:btnsearch" name="myFrm:btnsearch"><i class="icon-search"></i></button>
</h:form>
Sasinda Rukshan
  • 439
  • 1
  • 5
  • 14