locked
Placement of ICON in LightSwitch HTML screen button RRS feed

  • Question

  • In my LightSwitch HTML screen, I have a button as shown and where I inserted an ICON using the code below. How can I get the ICON to appear to the "left" (to the right would also be nice) of the text "Order Status" instead of at the top of the text as shown.  Thank you... 

    myapp.Main.OrderStatus_postRender = function (element, contentItem) {
        $(element).children().removeAttr("data-icon data-iconpos");
        var icon = $("<div><img src='./Content/Images/paper_content_chart.png'></div>");
        $(element).children().prepend(icon);
    };


    Edward Piccoli

    Thursday, June 19, 2014 2:21 PM

Answers

  • Have you tried:

     var icon = $("<div><img src='./Content/Images/paper_content_chart.png' style='float:left;padding-right:10px' /></div>");
    
    icon.prependTo($(element));

    • Marked as answer by Spaceworld Wednesday, June 25, 2014 3:42 AM
    Wednesday, June 25, 2014 2:34 AM

All replies

  • How can I get the ICON to appear to the "left" (to the right would also be nice) of the text "Order Status"

    For this issue about custom icon in the button, you can add your own  custom icons using CSS.

    Such as: Left arrow - data-icon="arrow-l"

    You may find this helpful:

    Custom icons using CSS: http://view.jquerymobile.com/1.3.0/docs/widgets/icons/  

    Further information about custom icon:

    Custom footer icons

    Hope it helps.

    Regards


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, June 24, 2014 9:42 AM
  • Have you tried:

     var icon = $("<div><img src='./Content/Images/paper_content_chart.png' style='float:left;padding-right:10px' /></div>");
    
    icon.prependTo($(element));

    • Marked as answer by Spaceworld Wednesday, June 25, 2014 3:42 AM
    Wednesday, June 25, 2014 2:34 AM
  • That worked great.  Thank you.  Icon is now to the left of my text "Order Status".  One problem now created (not really a problem) is that the text "Order Status" is not centered horizontally on the right of the Icon but rather at the right of the Icon at the top of the button.

    ________________________

      -----------          Order Status

         ICON

      -----------

    _______________________


    Edward Piccoli

    • Marked as answer by Spaceworld Wednesday, June 25, 2014 3:42 AM
    • Unmarked as answer by Spaceworld Wednesday, June 25, 2014 3:43 AM
    Wednesday, June 25, 2014 3:41 AM
  • Thank you for the information.  It didn't help me solve the problem but gave me a lot of valuable information and I appreciate your kind help.  The answer below worked just fine:

    var icon = $("<div><img src='./Content/Images/paper_content_chart.png' style='float:left;padding-right:10px' /></div>");
    icon.prependTo($(element));


    Edward Piccoli

    Wednesday, June 25, 2014 3:44 AM