locked
Lightswitch HTML Button Color RRS feed

  • Question

  • Hi All,

    Is there any way to change the background color or text color for a button in HTML Lightswitch?

    I have looked at both created and post render but can't get it to change....

    I have multiple buttons and only want to change a specific button. All I can think of is setting the button to a custom CSS for that element?

    Thanks,

    Matt

    Friday, September 6, 2013 10:57 AM

Answers

  • See:

    LightSwitch HTML Client For The Desktop Web Browser

    image

    myapp.BrowseStudents.Previous_postRender = function (element, contentItem) {
        var PreviousButtonOutside = $(element);
        var PreviousButtonInside = $(element).children();
    
        PreviousButtonOutside.addClass("gray");
        PreviousButtonInside.addClass("orange");
    };
    myapp.BrowseStudents.Next_postRender = function (element, contentItem) {
        var NextButtonOutside = $(element);
        var NextButtonInside = $(element).children();
    
        NextButtonOutside.addClass("gray");
        NextButtonInside.addClass("blue");
    };
    myapp.BrowseStudents.AddStudent_postRender = function (element, contentItem) {
        var AddStudentButtonOutside = $(element);
        var AddStudentButtonInside = $(element).children();
    
        AddStudentButtonOutside.addClass("gray");
        AddStudentButtonInside.addClass("green");
    };


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com


    • Edited by ADefwebserver Friday, September 6, 2013 12:17 PM formattng
    • Marked as answer by Angie Xu Wednesday, September 18, 2013 4:29 AM
    Friday, September 6, 2013 12:16 PM

All replies

  • See:

    LightSwitch HTML Client For The Desktop Web Browser

    image

    myapp.BrowseStudents.Previous_postRender = function (element, contentItem) {
        var PreviousButtonOutside = $(element);
        var PreviousButtonInside = $(element).children();
    
        PreviousButtonOutside.addClass("gray");
        PreviousButtonInside.addClass("orange");
    };
    myapp.BrowseStudents.Next_postRender = function (element, contentItem) {
        var NextButtonOutside = $(element);
        var NextButtonInside = $(element).children();
    
        NextButtonOutside.addClass("gray");
        NextButtonInside.addClass("blue");
    };
    myapp.BrowseStudents.AddStudent_postRender = function (element, contentItem) {
        var AddStudentButtonOutside = $(element);
        var AddStudentButtonInside = $(element).children();
    
        AddStudentButtonOutside.addClass("gray");
        AddStudentButtonInside.addClass("green");
    };


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com


    • Edited by ADefwebserver Friday, September 6, 2013 12:17 PM formattng
    • Marked as answer by Angie Xu Wednesday, September 18, 2013 4:29 AM
    Friday, September 6, 2013 12:16 PM
  • This code does not seem to work for a Layout Item button.

    I have edited the postRender for a Layout Item > Button, which is used to navigate to a new screen shown as dialogue:

    myapp.AddEditOrderLine.ShowAddEditDeviceType_postRender = function (element, contentItem) {
        // Write code here.
        $(element).css("font-style", "italic");
        $(element).css("font-color", "red");

    };

    The code does make the text in the button italic, but it does not change the color.

    Advice?


    Wednesday, January 13, 2016 12:13 AM
  • I have no examples but its a .css issue so using a tool like Firebug may help you locate the property to alter.

    Or ask Josh Booker for help...


    Unleash the Power - Get the LightSwitch HTML Client / SharePoint book

    http://LightSwitchHelpWebsite.com

    Wednesday, January 13, 2016 12:25 AM
  • Yeah its a CSS thing. Suggest putting a class in usercustomization.css file, include !important on styles then use addClass in your postrender method. HTH, Josh
    Wednesday, January 13, 2016 1:10 AM
  • Wow. Thank you so much for the reply.

    I know what some of those words mean... haha.

    Not being a developer/programmer I am not so sure what it means to 'put a class in usercustomization.css file, include !important on styles then use addClass in your postrender method.'

    But I do greatly appreciate the answer.

    Wednesday, January 13, 2016 1:47 PM
  • CSS styles are applied in the order they are read by the browser.  Styles applied later override those applied before them.

    In you HTML project there is a file called user-customization.css which is the last css file to be applied, therefore, this is where we override css styles the for HTML client.

    Instead of adding styles to your button using .css() method as in the OP code above, you would create a new class in the user-customization.css file and then use addClass() method in your postRender code to add the new class to the button.

    Here is an example:

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/b437a7b7-7a73-44a2-a57e-0a1eebe29ed1/how-to-change-size-andor-appearance-of-a-standard-screen-button-in-the-lightswitch-html-client?forum=lightswitch

      Because styles in this file get applied after the msls default css, they will override the default styles.  That said, there are still times when this doesn't work, usually because of the timing when jQuery Mobile creates controls and adds it's own classes.  In these cases it may help to include the css directive !important. Like so:

    .mybuttonstyle{
       font-style: "italic" !important;
       font-color: "red" !important;
    }

    Other times you may have to wrap your addClass code in setTimeout() which is also discussed in the above linked thread.

    HTH,

    Josh

    • Proposed as answer by CreedCor Wednesday, January 13, 2016 5:03 PM
    Wednesday, January 13, 2016 2:11 PM
  • Awesome, thank you for elaborating your answer!!

    This really helped me understand it more. The link you provided was excellent and helped me achieve what I was looking for. 

    I am basically learning all of this on the fly, so I will have a lot of questions. I am in the position of being tasked with developing an inventory system front end - but have never coded. It is coming along well thanks to people like you in this forum, a lot of research, and a lot of trial.

    Thank you again!!

    Wednesday, January 13, 2016 5:02 PM