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