Field CSS – field background colour

[Maciek Grischke]

I can’t find any info regarding the Field CSS options.

I tried applying a background color by

element.style {
background-color: blue;
}

but that’s clearly not the right way.

I applied this kind of formatting before and I forgot how to do it now 🙁

I have a column called Priority with Priorities 1, 2, 3 and 4. I’d like to apply different colours for each priority. I want this to work in Display Form and Edit Form. This field is Read-Only once it’s set and cannot be changed.

[Alexander Bautz]

Use only the actual CSS styles like this:

background-color: blue;

Alexander

[Maciek Grischke]

Thanks.

How can I apply different colors to different Priorities? Can I do it in Field CSS?

[Alexander Bautz]

You can control the background color by for example the status of a choice field – check this example: https://spjsblog.com/forums/topic/dffs-form-examples/#post-19842

This will color the background of the dropdown, but you can change it from the original example:

jQuery("#dffs_Status select").on("change",function(){
    var bgColor = "white", txtColor = "black";
    switch(jQuery(this).val()){
        case "Not started":
            bgColor = "red";
            txtColor = "white";
        break;
        case "In progress":
            bgColor = "green";
            txtColor = "white";
        break;
        case "Completed":
            bgColor = "gray";
            txtColor = "black";
        break;
    }
    jQuery(this).css({"background-color":bgColor,"color":txtColor});
}).trigger("change");

like this:

jQuery("#dffs_Status select").on("change",function(){
    var bgColor = "white", txtColor = "black";
    switch(jQuery(this).val()){
        case "Not started":
            bgColor = "red";
            txtColor = "white";
        break;
        case "In progress":
            bgColor = "green";
            txtColor = "white";
        break;
        case "Completed":
            bgColor = "gray";
            txtColor = "black";
        break;
    }
    jQuery(this).parents("tr:first").css({"background-color":bgColor,"color":txtColor});
}).trigger("change");

Alexander

[Author]

Posts