Create button with image displayed on right of text

4 posts, 1 answers
  1. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 17 Jun 2013 Link to this post

    I'm trying to create (in a navbar) a drop-down menu using a mobile button and popover.  The button-styling works fine, but I cannot seem to add the image inside the button; the best I have gotten is to leave it to the right (and out outside) of the button.

    Here is a jsfiddle
    http://jsfiddle.net/raltman/LCh3E/1/

    What is the best approach for making this work correctly?
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Jun 2013 Link to this post

    Hi Robert,

    In order to achieve the desired outcome you could add the <img> element inside the Button element. For your convenience I updated the jsFiddle example - please check it and let me know if this fits your requirements.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 19 Jun 2013 Link to this post

    Perfect!

    I had to modify the approach slightly so that I could update the menu text from javascript:

    The html became:
                        <span data-align="right">
                            <a data-rel="popover" href="#popover-usermenu" data-role="button">
                                <span class="show-user-name"></span>
                                <img src="images/app/user-menu-arrow.png"/>
                            </a> 
                        </span>

    and the javascript
                $(".show-user-name").text(app.user.name);

    now correctly updates the menu name without removing the image.

    Thanks again.
  7. Answer
    Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 19 Jun 2013 Link to this post

    Perfect!

    I had to modify the approach slightly so that I could update the menu text from javascript:

    The html became:
                          < span data-align="right" >
                              < a data-rel="popover" href="#popover-usermenu" data-role="button" >
                                  < span class="show-user-name" >
                                     < /span >
                                   img src="images/app/user-menu-arrow.png" / >
                                 < /a >
                             < /span >

    (ignore the missing < on the image tag -- experiencing trouble with post editor)

    and the javascript
                $(".show-user-name").text(app.user.name);

    now correctly updates the menu name without removing the image.

    Thanks again.
  8.
Back to Top