locked
Lightswitch HTML Text Box Background Colour RRS feed

  • Question

  • Hi,

    Does anybody know how to change the background colour of an HTML Client text box?

    Thanks,

    Andrew


    A Fleet

    Tuesday, September 20, 2016 10:02 AM

Answers

  • This works in the postRender method for the contentItem.

        $('input', element).css({
            "margin-top": "1px",
            "margin-bottom": "1px",
            "background-color": "#fdf8d6"
        });

    The margin-top and margin-bottom adjustments keep your new background color from interfering with the border style applied to the element.  You can change or remove these properties as needed.



    • Edited by Hessc Thursday, September 29, 2016 3:14 PM
    • Proposed as answer by Xpert360 Thursday, September 29, 2016 5:14 PM
    • Marked as answer by Angie Xu Monday, October 10, 2016 4:21 AM
    Thursday, September 29, 2016 3:12 PM

All replies

  • Hi Andrew,

    To change the background color of Textbox in Lightswitch, this might help you: https://social.msdn.microsoft.com/Forums/en-US/0086c087-3f1d-48bc-8e68-f0137f428416/change-background-color-of-control-on-child?forum=lightswitch

    Regards,

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, September 26, 2016 1:31 PM
  • Hi Angie,

    Thanks for this but I think this is a solution for the Silverlight client. I am using the HTML client.

    I have tried this :

    myapp.ViewCashOut.SlipNumber_postRender = function (element, contentItem) {
        //Write code here.
        $(element).css({
            "background-color": "#fdf8d6",
        });
    };

    However it only changes the colour around the border of the text box. See below.


    Andrew Fleet

    Wednesday, September 28, 2016 4:15 PM
  • Andrew, you are on the right track, and this will be possible, you just need to figure out on which HTML element you need to change the background via the .css() call. I would suggest using the Chrome Inspector under Chrome Development Tools to figure out exactly which element you need to change - using this tool you should be able to change it at run time until you get the desired effect and then simply write a selector accordingly.

    Regards, Xander. My Blog


    • Edited by novascape Wednesday, September 28, 2016 7:09 PM
    Wednesday, September 28, 2016 7:08 PM
  • This works in the postRender method for the contentItem.

        $('input', element).css({
            "margin-top": "1px",
            "margin-bottom": "1px",
            "background-color": "#fdf8d6"
        });

    The margin-top and margin-bottom adjustments keep your new background color from interfering with the border style applied to the element.  You can change or remove these properties as needed.



    • Edited by Hessc Thursday, September 29, 2016 3:14 PM
    • Proposed as answer by Xpert360 Thursday, September 29, 2016 5:14 PM
    • Marked as answer by Angie Xu Monday, October 10, 2016 4:21 AM
    Thursday, September 29, 2016 3:12 PM
  • Thanks Xander

    A Fleet

    Friday, September 30, 2016 3:50 PM
  • Thanks Hessc

    I tried this and it works.


    A Fleet

    Friday, September 30, 2016 3:51 PM