locked
icon button border RRS feed

  • Question

  • I put a button on the screen and change its style to an icon button in the postrender method calling:

        $(element).children().addClass("msls-large-icon");
        $(element).children().attr("data-icon", "msls-question");
        $(element).children().text(""); //didnt want any text
    

    But when clicking on the button, a blue border appears. How can I get rid of this border?

    Thanks


    Yves Pflieger

    Tuesday, January 20, 2015 5:58 PM

Answers

  • Hi Yves,

    One way to lose the focus rectangle is to introduce an override into your user-customization.css file by adding the following entry: -

    .ui-nofocus.ui-focus,
    .ui-nofocus.ui-btn:focus {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    This class would then be applied in the specific button's _postRender function alongside your other customisations: -

    $(element).children().addClass("msls-large-icon");
    $(element).children().attr("data-icon", "msls-question");
    $(element).children().text(""); // didn't want any text
    $(element).children().addClass("ui-nofocus");

    Also, if you want to retain a visual cue for tab focus, you could add the following addition to your user-customization.css: -

    .ui-nofocus.msls-large-icon.ui-focus .ui-icon {
        background-color: #cde6f7 !important;
    }


    HTH,

    Chris




    • Edited by ChrisCookDev Tuesday, January 20, 2015 9:02 PM
    • Marked as answer by Yves Pflieger Wednesday, January 21, 2015 9:07 AM
    Tuesday, January 20, 2015 8:41 PM
  • I have had a TON of styling issues with the HTML client.  I have been able to resolve them all by using F12 DOM Explorer and the Select Element tool.  Find the style element you need to fix by using the tool, then find the same element in one of the various style sheets.  Copy the applicable elements over to the UserCustomization style sheet and change them to suit your needs.  If you want to add custom styles via javascript, you do that from your custom styles.  This will help in the long run with maintainability because you are not altering any LS source.  This can be quite a process given all of the overlays and elements injected by msls but once you get used to it, it is quite easy.  ChrisCookDev's answer is exactly the kind of method to use to solve this problem.
    • Marked as answer by Yves Pflieger Wednesday, January 21, 2015 9:08 AM
    Wednesday, January 21, 2015 4:23 AM

All replies

  • Hi Yves,

    One way to lose the focus rectangle is to introduce an override into your user-customization.css file by adding the following entry: -

    .ui-nofocus.ui-focus,
    .ui-nofocus.ui-btn:focus {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    This class would then be applied in the specific button's _postRender function alongside your other customisations: -

    $(element).children().addClass("msls-large-icon");
    $(element).children().attr("data-icon", "msls-question");
    $(element).children().text(""); // didn't want any text
    $(element).children().addClass("ui-nofocus");

    Also, if you want to retain a visual cue for tab focus, you could add the following addition to your user-customization.css: -

    .ui-nofocus.msls-large-icon.ui-focus .ui-icon {
        background-color: #cde6f7 !important;
    }


    HTH,

    Chris




    • Edited by ChrisCookDev Tuesday, January 20, 2015 9:02 PM
    • Marked as answer by Yves Pflieger Wednesday, January 21, 2015 9:07 AM
    Tuesday, January 20, 2015 8:41 PM
  • I have had a TON of styling issues with the HTML client.  I have been able to resolve them all by using F12 DOM Explorer and the Select Element tool.  Find the style element you need to fix by using the tool, then find the same element in one of the various style sheets.  Copy the applicable elements over to the UserCustomization style sheet and change them to suit your needs.  If you want to add custom styles via javascript, you do that from your custom styles.  This will help in the long run with maintainability because you are not altering any LS source.  This can be quite a process given all of the overlays and elements injected by msls but once you get used to it, it is quite easy.  ChrisCookDev's answer is exactly the kind of method to use to solve this problem.
    • Marked as answer by Yves Pflieger Wednesday, January 21, 2015 9:08 AM
    Wednesday, January 21, 2015 4:23 AM
  • Excellent, it works fine. Thanks a lot!

    Yves


    Yves Pflieger

    Wednesday, January 21, 2015 9:08 AM