1

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 :-) )

  • I think your first div needs to come under "rowFormatter" so try this for your first div - { "$schema": "developer.microsoft.com/json-schemas/sp/…", "hideSelection": false, "hideColumnHeader": false, "rowFormatter": { "elmType": "div" }, "style": { "width": "100%", "display": "block" } } – Jamie_lee Feb 12 '19 at 10:35
  • Thanks for the suggestion. However, it does not seem to match the schema (there is, e.g. nog attribute "style", nor "hideColumnHeader"). Am I misreading you? – Nick Sabbe Feb 13 '19 at 11:25
  • I just ran into exactly the same issue. The elements keep showing side-by-side but I want them to be arranged below each other - the standard behaviour one would expect from divs. How did you solve the issue? Thank you. – dfx413 Jul 14 at 9:25
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!

| improve this answer | |
  • This certainly is a step in the right direction: when I look at the resulting elements in the debugger of my browser (Edge), I see the display:block styly being correctly applied to the divs. – Nick Sabbe Mar 8 '19 at 16:28
  • However, for some reason, the two divs are still displayed side by side, so while the style is now present, it appears to be ignored? – Nick Sabbe Mar 8 '19 at 16:29
0

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"
        }
    ]
}

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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