Field CSS – field background colour

Forums Dynamic Forms for SharePoint Field CSS – field background colour

Viewing 2 reply threads
  • Author
    Posts
    • #28943
      Maciek Grischke
      Participant

      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.

    • #28945
      Alexander Bautz
      Keymaster

      Use only the actual CSS styles like this:

      background-color: blue;

      Alexander

      • #28947
        Maciek Grischke
        Participant

        Thanks.

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

    • #28949
      Alexander Bautz
      Keymaster

      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

Viewing 2 reply threads
  • You must be logged in to reply to this topic.