Forum Discussion
mattchowell
Apr 11, 2022Iron Contributor
JSON column formatting @thumbnail doesn't respect border styling or row height
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&cb=%22%7B270BBD15%2D9F70%2D4945%2D9BC9%2DF0166516202D%7D%2C3%22" data-iscustomformatterthumbnail="true">
</div>
</a>
</div>
No RepliesBe the first to reply