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

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");
};

Answer 1

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).

Answer 2

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.

Answer 3

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.