locked
How to change size and/or appearance of a standard screen button in the LightSwitch HTML client? RRS feed

  • Question

  • I am trying to change the font-size and the button icon size for a standard Command Bar button in a LightSwitch HTML Client screen.  I have tried several options but none seem to work.  Can someone please help me with the correct syntax?

    Here is an example of what I have tried:

    myapp.BrowseProducts.AddProduct_postRender = function (element, contentItem) {

        //$(element).css("height", "128px");
        //$(element).css("width", "128px");
        //$(element).css("font-size", "24px");
    };

    Friday, September 5, 2014 12:59 AM

Answers

  • Hi Rodney,

    As the inner icon and text elements are added to the command bar buttons (by jQuery Mobile's enhancePage) after the _postRender has executed, you'll need to take a slightly different approach.

    One option, which seems to be the magic bullet in many HTML client (& general JavaScript) situations would be to use the setTimeout as follows (delaying your interaction until after the button has been enhanced to add the inner elements): -

    myapp.BrowseProducts.AddProduct_postRender = function (element, contentItem) {
        setTimeout(function () {
            var $uiIcon = $(element).find(".ui-icon");
            var $uiBtnText = $(element).find(".ui-btn-text");
            $uiBtnText.css("font-size", "24px");
        }, 500);
    };

    Having said this, I always feel slightly uncomfortable with the indeterminate nature of this approach and, in this situation, I would suggest using css to customise the buttons.

    This can be tackled by overriding the standard sizing in your user-customization.css file by adding the following entries (these are based upon a simple doubling of the button/text sizes though you should be able to adjust these to suit): -

    If you decide to take this approach you'll need to take note of, and extend upon, the background-position entries towards the end of these css entries.  Each of these mirror the standard ".msls-large-icon .ui-icon-msls-*" entries in msls-*.css (where the asterisks respectively represent the relevant button and the version of LightSwitch you're working with) and simply adjusts the negative x position offset to match the change in scale.

    For example the standard css for the trash icon would change from the following: -

    To double the x position offset from -425 to -850 as follows: -

    .msls-large-icon .ui-icon-msls-trash {
        background-position: -850px 0px;
    }
    

    Hope this helps,

    Chris

    P.S. Apologies for posting some of the above code as images.  Unfortunately the forum was very insistent that the background-position lines needed to lose half the text - if anyone knows why I'd be interested to understand this (I wonder how many other posts have been corrupted in the same way).




    • Edited by ChrisCookDev Sunday, September 7, 2014 9:16 PM
    • Marked as answer by Rodney Price Friday, September 12, 2014 8:29 PM
    Sunday, September 7, 2014 8:27 PM
  • Hi Dave,

    In my example, the .msls-ctl-command-bar-button in the css selectors should target all of the command bar buttons in the footer.

    If you wanted to more specifically target buttons, I would replace the .msls-ctl-command-bar-button class selector in each of the css entries with a new class such as .double-size-button e.g.: -

    .double-size-button .msls-large-icon .ui-btn-text {
        font-size: 24px;
        line-height: 32px;
    }
        
    .double-size-button .msls-large-icon .ui-icon {
        width: 52px;
        height: 52px;
        border-radius: 30px;
        border-width: 4px;
    }
        
    .double-size-button .msls-large-icon.ui-btn-icon-top .ui-icon {
        margin-left: 50px;
    }
        
    .double-size-button .msls-large-icon.ui-btn-icon-top .ui-btn-inner {
        width: 160px;
        padding-top: 60px;
    }
    
    .double-size-button .msls-large-icon .ui-icon-msls-search {
        background-position: -1472px 0px;
    }
    
    .double-size-button .msls-large-icon .ui-icon-msls-add {
        background-position: -584px 0px;
    }
    
    .double-size-button .msls-large-icon .ui-icon-msls-filter {
        background-position: -1120px 0px;
    }
    

    This class would then be applied in the specific button's _postRender function in the following fashion: -

    myapp.BrowseProducts.AddProduct_postRender = function (element, contentItem) {
        $(element).addClass("double-size-button");
    };

    Hopefully this will provide the required flexibility.


    • Edited by ChrisCookDev Monday, September 8, 2014 9:46 AM
    • Marked as answer by Rodney Price Friday, September 12, 2014 8:29 PM
    Monday, September 8, 2014 9:24 AM

All replies

  • Hi Rodney,

    As the inner icon and text elements are added to the command bar buttons (by jQuery Mobile's enhancePage) after the _postRender has executed, you'll need to take a slightly different approach.

    One option, which seems to be the magic bullet in many HTML client (& general JavaScript) situations would be to use the setTimeout as follows (delaying your interaction until after the button has been enhanced to add the inner elements): -

    myapp.BrowseProducts.AddProduct_postRender = function (element, contentItem) {
        setTimeout(function () {
            var $uiIcon = $(element).find(".ui-icon");
            var $uiBtnText = $(element).find(".ui-btn-text");
            $uiBtnText.css("font-size", "24px");
        }, 500);
    };

    Having said this, I always feel slightly uncomfortable with the indeterminate nature of this approach and, in this situation, I would suggest using css to customise the buttons.

    This can be tackled by overriding the standard sizing in your user-customization.css file by adding the following entries (these are based upon a simple doubling of the button/text sizes though you should be able to adjust these to suit): -

    If you decide to take this approach you'll need to take note of, and extend upon, the background-position entries towards the end of these css entries.  Each of these mirror the standard ".msls-large-icon .ui-icon-msls-*" entries in msls-*.css (where the asterisks respectively represent the relevant button and the version of LightSwitch you're working with) and simply adjusts the negative x position offset to match the change in scale.

    For example the standard css for the trash icon would change from the following: -

    To double the x position offset from -425 to -850 as follows: -

    .msls-large-icon .ui-icon-msls-trash {
        background-position: -850px 0px;
    }
    

    Hope this helps,

    Chris

    P.S. Apologies for posting some of the above code as images.  Unfortunately the forum was very insistent that the background-position lines needed to lose half the text - if anyone knows why I'd be interested to understand this (I wonder how many other posts have been corrupted in the same way).




    • Edited by ChrisCookDev Sunday, September 7, 2014 9:16 PM
    • Marked as answer by Rodney Price Friday, September 12, 2014 8:29 PM
    Sunday, September 7, 2014 8:27 PM
  • Wont that change all buttons, not just the one?

    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Monday, September 8, 2014 7:31 AM
  • Hi Dave,

    In my example, the .msls-ctl-command-bar-button in the css selectors should target all of the command bar buttons in the footer.

    If you wanted to more specifically target buttons, I would replace the .msls-ctl-command-bar-button class selector in each of the css entries with a new class such as .double-size-button e.g.: -

    .double-size-button .msls-large-icon .ui-btn-text {
        font-size: 24px;
        line-height: 32px;
    }
        
    .double-size-button .msls-large-icon .ui-icon {
        width: 52px;
        height: 52px;
        border-radius: 30px;
        border-width: 4px;
    }
        
    .double-size-button .msls-large-icon.ui-btn-icon-top .ui-icon {
        margin-left: 50px;
    }
        
    .double-size-button .msls-large-icon.ui-btn-icon-top .ui-btn-inner {
        width: 160px;
        padding-top: 60px;
    }
    
    .double-size-button .msls-large-icon .ui-icon-msls-search {
        background-position: -1472px 0px;
    }
    
    .double-size-button .msls-large-icon .ui-icon-msls-add {
        background-position: -584px 0px;
    }
    
    .double-size-button .msls-large-icon .ui-icon-msls-filter {
        background-position: -1120px 0px;
    }
    

    This class would then be applied in the specific button's _postRender function in the following fashion: -

    myapp.BrowseProducts.AddProduct_postRender = function (element, contentItem) {
        $(element).addClass("double-size-button");
    };

    Hopefully this will provide the required flexibility.


    • Edited by ChrisCookDev Monday, September 8, 2014 9:46 AM
    • Marked as answer by Rodney Price Friday, September 12, 2014 8:29 PM
    Monday, September 8, 2014 9:24 AM