7 Replies Latest reply on Oct 16, 2008 6:04 AM by Achim Grimm

    button with text and image

    marx3 Apprentice

      Is it possible to make button with text and image at once?

        • 1. Re: button with text and image
          Ilya Shaikovsky Master

           

          <button>
           <h:graphicImage value="/pages/alabama.gif"/>
           <h:outputText value="test"/>
           </button>


          • 2. Re: button with text and image
            marx3 Apprentice

            Doesn't work
            I've tried with
            <h:commandButton
            <s:button
            It display empty button, then unclikable icon and text

            <s:button action="myAction>
             <h:graphicImage styleClass="icon" value="/img/edit_16.gif" alt="" title="#{messages.oper_edit}"/>
             <h:outputText value="#{messages.oper_edit}"/>
            </s:button>
            


            • 3. Re: button with text and image
              Ilya Shaikovsky Master

              As you can see in my snippet - there is common HTML button but not the component ;)

              • 4. Re: button with text and image
                marx3 Apprentice

                your code behaves the same - doesn't work either

                • 5. Re: button with text and image
                  Diego Coronel Apprentice

                  i did it, but you need to use css, and your image cant have rounded corner...

                  component.xhtml

                  <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                   xmlns:ui="http://java.sun.com/jsf/facelets"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:t="http://myfaces.apache.org/tomahawk"
                   xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                   xmlns:c="http://java.sun.com/jstl/core"
                   xmlns:s="http://jboss.com/products/seam/taglib"
                   xmlns:fpf="http://www.fpf.br/jsf"
                   xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
                  
                   <c:if test="${empty immediate}">
                   <c:set var="immediate" value="false" />
                   </c:if>
                   <c:if test="${empty id}">
                   <c:set var="id" value="#{method}" />
                   </c:if>
                   <c:if test="${empty disabled}">
                   <c:set var="disabled" value="false" />
                   </c:if>
                   <h:commandButton
                   id="#{id}"
                   value="${label}"
                   action="#{managedBean[method]}"
                   immediate="${immediate}"
                   styleClass="bt_fundo_idoctor_2"
                   onmouseover="className='bt_fundo_idoctor_f2_2'"
                   onmouseout="className='bt_fundo_idoctor_2'"
                   disabled="#{disabled}">
                   <ui:insert />
                   </h:commandButton>
                  
                  </ui:composition>
                  


                  my page:
                   <fpf:button label="#{msg.btCancelar}" managedBean="#{estoqueminimoBean}" method="acaoCancelar" immediate="true" />
                  


                  your css will use images

                  • 6. Re: button with text and image
                    Miglena Borisova Newbie

                    Hi,
                    I would like to make an a4j:commandButton with an image and text inside - just like the buttons of the pickList.
                    What I've succeeded to do was either text or image in the button, but not both :(
                    Can you, please, help me do it?
                    Thank you!

                    • 7. Re: button with text and image
                      Achim Grimm Newbie

                      Hi molif,

                      this would be a nice feature. But in anyway there is a HTML-workaround. You can place a backgroundimage with the image you want to have on the left side of the button and than make a left-margin for the button. The text will be displayed next to your image.

                      I know it's not very nice, and a tag-support would be great. But this can help.