JSON column formatting @thumbnail doesn't respect border styling or row height

Iron Contributor

I'm using @thumbnail.large to show a preview of documents/images in a library view. If I add a border to the image element, it gets applied to the containing div, not the image. 

Also, the row height gets a fixed value of 200px instead of adjusting to the height of the contents.

Here's the JSON:

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "a",
  "attributes": {
    "class": " ",
    "target": "_blank",
    "href": "='https://xxx.sharepoint.com/sites/xxx/_layouts/download.aspx?SourceUrl=' + [$FileRef]"
  
},
  "style": {
    "max-height": ""
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "@thumbnail.large"
      },
      "style": {
        "position": "relative",
        "top": "",
        "left": "50%",
        "width": "100%",
        "height": "100%",
        "margin-left": "-50%",
        "margin-top": "0%",
        "padding-top": "5px",
        "border": "1px solid #ddd"
      }
    }
  ]
}

And here's the output - note the height for the system added div with class sp-customformatter-thumbnail:

<div class="customField_ab5ae447">
<a style="max-height:;" class="sp-field-customFormatter  " target="_blank" href="https://xxx.sharepoint.com/sites/xxx/_layouts/download.aspx?SourceUrl=/sites/xxx/Shared Documents/xxx-Jersey City.jpg" rel="noopener noreferrer " data-interception="off" tabindex="-1" data-kmt="1">
<div class="sp-customformatter-thumbnail" style="height: 200px; width: 200px;">
<img style="position:relative;top:;left:50%;width:100%;height:100%;margin-left:-50%;margin-top:0%;padding-top:5px;border:1px solid #ddd;" src="https://xxx.sharepoint.com/_api/v2.1/drives/b!i2XtORILsUq4LQlRkaD-6JW0mk4dwLxDlAM7ObbmLmbZTttVD6p1QYpKBshlGsbG/items/01GEOLRXAVXUFSO4E7IVEZXSPQCZSRMIBN/thumbnails/0/c200x200/content?prefer=noredirect%2Cclosestavailablesize&amp;cb=%22%7B270BBD15%2D9F70%2D4945%2D9BC9%2DF0166516202D%7D%2C3%22" data-iscustomformatterthumbnail="true">
</div>
</a>
</div>

 

0 Replies