Custom column formatting with JSON: style ignored?

Question

According to The official detailed syntax reference, I can use (CSS-like) style attributes like "display" and "width".

I tried something like this:

    {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
     {
        "elmType": "div",
        "width": "100%",
        "display": "block",
        "children": [
         {
            "elmType": "a",
            "txtContent": "@currentField",
            "attributes": {
               "target": "_blank",
               "href": "='https://studentarteveldehsbe.sharepoint.com/sites/ICTManagement/Lists/ProjectUitgave/AllItems.aspx?FilterField1=ProjectNr&FilterValue1=' + [$Nummer]"
            }
         }
         ]
     },
     {
        "elmType": "div",
        "display": "block",
        "txtContent": "=' (' + [$Investering] + '/' + [$Kost] + ')'"     }
   ]
}

However, when I look at the resulting list with a debugger, what I get is:

<div class="customField_389b8982">
    <div class="sp-field-customFormatter">
        <div>
            <a href="https://studentarteveldehsbe.sharepoint.com/sites/ICTManagement/Lists/ProjectUitgave/AllItems.aspx?FilterField1=ProjectNr&amp;FilterValue1=7002" target="_blank" rel="noopener noreferrer ">4000</a>
        </div>
        <div> (0.00 €/4,000.00 €)</div>
    </div>
</div>

As you can see, the width and display attributes are totally ignored (and this is indeed what I observe). Am I missing something, is this a bug, is it by design or am I just looking at it the wrong way?

Note: for completeness' sake, in my example, I was just trying to force the second "inner" DIV to start on a new line, but for some reason, SharePoint insists on showing them next to each other (so if you have a solution for this: also greatly appreciated :-) )

Answer 1

Those are style attributes and will need to be nested in a style property. So adjusting your format like this should apply those values:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
     {
        "elmType": "div",
        "style": {
            "width": "100%",
            "display": "block"
        },
        "children": [
         {
            "elmType": "a",
            "txtContent": "@currentField",
            "attributes": {
               "target": "_blank",
               "href": "='https://studentarteveldehsbe.sharepoint.com/sites/ICTManagement/Lists/ProjectUitgave/AllItems.aspx?FilterField1=ProjectNr&FilterValue1=' + [$Nummer]"
            }
         }]
     },
     {
        "elmType": "div",
        "style": {
            "display": "block"
        },
        "txtContent": "=' (' + [$Investering] + '/' + [$Kost] + ')'"
     }]
}

To be fair, the actual sample on the documentation side isn't even correct formatting syntax. I'll submit a pull request to fix that. Thanks!

Answer 2

Found the solution for the elements positioning a while ago. You need to enclose your elements into parent DIV with CSS set to display: block. Then it works like a charm and the elements are below each other.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

    "elmType": "div",
    "style":{
        "display":"block", // YOU NEED THIS IN THE PARENT ELEMENT
        "text-align":"center",
        "width":"100px"
    },
    "children": [
        {
            "elmType": "img",
            "attributes": {
                "src": "@thumbnail.medium" 
            },
            "style": {
                "max-height": "100px",
                "max-width": "100px",
                "display": "block",
                "margin": "auto"
              }
        },
        {
            "elmType": "div",
            "txtContent":"your text content goes here"
        }
    ]
}