2

I have the wrap code:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style":{
        "white-space":"wrap"
  }, 
  "txtContent": "@currentField"
}

I have the color code and column width code

    { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
     "elmType": "div",
     "txtContent": "@currentField",
     "style": {"color": "green","width": "300px"}
 }

Can someone please help me to combine the two so they work, I tried a few things no luck. Tks.

2 Answers 2

0

Try the following JSON, it shall work for you.

    { "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 
     "elmType": "div", 
     "style":{ "white-space":"wrap","color": "green","width": "300px" },
     "txtContent": "@currentField" 
    }

In fact as you set the width to 300px, it makes the wrap not work as you thought. You may try to use a smaller width value for it.

2
  • Thank You! I will give it a try, I realized I had style twice, but this is great!
    – Aspen
    Apr 21, 2020 at 16:12
  • @Aspen Just let us know if you have any further question.
    – Jerry_MSFT
    Apr 22, 2020 at 8:45
0

Use below combined JSON code:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
        "white-space": "wrap",
        "color": "green",
        "width": "300px"
    }
}

Note:

  1. It is better to use latest version (v2) of column-formatting JSON schema.
  2. You can add multiple CSS properties in single style property of JSON.

Go through below official documentation of column formatting. It will help you to better understand it:

Use column formatting to customize SharePoint - Style

2
  • Thank You! I will give it a try, I realized I had style twice, but this is great!
    – Aspen
    Apr 21, 2020 at 16:12
  • Sure, try and let me know if this works for you or not. Apr 21, 2020 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.