locked
Change background-color when click the list lightswitch html RRS feed

  • Question

  • Hi,

    I would change color when I click the list of Lightswitch html. This because I would view the list as 'textbox' and not as list of item. Now I view this:


    I would view this:

    How can i do?

    Thanks, best regards.

    Ale

    Monday, October 14, 2013 1:26 PM

Answers

  • The List control click and color-change is a useful default for working with the selected item.  However, if you don't plan on implementing any tap event code, having it turn blue and bold outline doesn't suit you it would seem.  You need to define your own CSS to override the default CSS.

    The LS developers added a user-customization.css file that overrides the msls-light or -dark.css for just this sort of thing.  The style for the active button is defined in .ui-btn-active with a background-image gradient and a background-color of light blue.

    In the user-customization.css file, override these:

    .ui-btn-active-override {
         background-image: none;
         background-color: rgb(241,241,241);  // identical light-grey
    }

    Next, in your View's Rows Layout - Employee Detail node, select Edit PostRender Code and apply the style and attribute to disable it.

    myapp.BrowseCustomers.EmplyeeDetailsTemplate_postRender = function (element, contentItem) {
        $('li').addClass('ui-btn-active-override').attr('disabled', true);
    };


    Sunday, November 3, 2013 6:11 AM

All replies

  • Hi Arenaut,

    I am not clear about the control you want to change backgroud-color. Based on my experience, when we click the list and it will change its backgroud-color as the picture below:

    Please provide us with more details if I have misunderstood you.


    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.

    Tuesday, October 15, 2013 6:59 AM
  • Hi 

    I told of changing backgroud-color for give a idea. But, my issue is this:

    I have a table with 'parameters' (columns: key and value). I would show this table as if is a simple Label-TextBox. So, I change to the list like this:

    But, when I click the list, its background-color changing like this:

    However I don't want that list is clickable. This is it possible?

    Thanks, regards

    Tuesday, October 15, 2013 7:33 AM
  • Hi Arenaut,

    Based on my understanding, list control is where the data can be displayed in a tabular manner.

    You may go to the blog below for more details:

    The LightSwitch HTML Table Control (Rohit Agrawal)

    http://blogs.msdn.com/b/lightswitch/archive/2013/09/11/the-lightswitch-html-table-control-rohit-agrawal.aspx

    Hope it helps.


    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.

    Thursday, October 17, 2013 1:48 PM
  • Hi

    thanks for your response, but if I change with tabulare manner, I have this result:

    Then I have the same result. I don't want that list is clickable and the list background change as you can see in the image above. I hope I explain.

    Thanks, best regards.

    Ale

    Thursday, October 17, 2013 2:11 PM
  • Hi Ale,

    >>I don't want that list is clickable.

    Based on my understanding, if you don't the list is editable, you may change the type of the control. However, if you don't want the list is clickable, there seems to be no proper solutions for it.

    If you have new ideas about it, please share it and it will be very appreciated.


    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.

    Saturday, November 2, 2013 12:41 PM
  • The List control click and color-change is a useful default for working with the selected item.  However, if you don't plan on implementing any tap event code, having it turn blue and bold outline doesn't suit you it would seem.  You need to define your own CSS to override the default CSS.

    The LS developers added a user-customization.css file that overrides the msls-light or -dark.css for just this sort of thing.  The style for the active button is defined in .ui-btn-active with a background-image gradient and a background-color of light blue.

    In the user-customization.css file, override these:

    .ui-btn-active-override {
         background-image: none;
         background-color: rgb(241,241,241);  // identical light-grey
    }

    Next, in your View's Rows Layout - Employee Detail node, select Edit PostRender Code and apply the style and attribute to disable it.

    myapp.BrowseCustomers.EmplyeeDetailsTemplate_postRender = function (element, contentItem) {
        $('li').addClass('ui-btn-active-override').attr('disabled', true);
    };


    Sunday, November 3, 2013 6:11 AM
  • Hi 

    it's perfect!!

    Thanks, best regards.

    Ale

    Tuesday, November 19, 2013 1:47 PM