search

pnp / List-Formatting

List Formatting Samples for use in SharePoint and Microsoft Lists
https://pnp.github.io/List-Formatting/
MIT License
1.7k stars 823 forks source link

Generic Super Type sample - File icon is tall and cut off #742

Open diver7 opened 7 months ago

diver7 commented 7 months ago

Sample (which sample are you having trouble with)

Generic Super Type

What Should Happen

File Icons should be small and square like the folder icon

What Actually Happens

Folder Icons are fine but the icon for files is really tall and skinny. Appears as though the height needs to be set. image

tecchan1107 commented 7 months ago

Thank you for reporting @diver7 !

When I tried it in my environment, the file icons did not show up high and I could not reproduce the problem. I also thought it might be a browser issue, so I tried switching to Microsoft Edge, Google Chrome, FireFox, and Safari and it displayed fine in all browsers.

image

Hmmm...is it possible that a browser extension is doing something bad...?

Also, how about the following code? I added the object-fit property to try it out.

Sample Code (Click to open/close) ``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "justify-content": "center" }, "children": [ { "📌COMMENT": "Folder Icon", "elmType": "div", "style": { "position": "relative", "display": "=if(startsWith([$ContentTypeId],'0x0120'),'','none')" }, "children": [ { "elmType": "svg", "attributes": { "viewBox": "0 0 32 32" }, "style": { "width": "21px", "height": "21px", "padding-top": "4px" }, "children": [ { "elmType": "path", "attributes": { "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')" } }, { "elmType": "path", "attributes": { "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')" } }, { "elmType": "path", "attributes": { "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')" } }, { "elmType": "path", "attributes": { "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z" }, "style": { "fill": "#FFFFFF", "opacity": "0.4" } } ] }, { "📌COMMENT": "Click Target for Folder", "elmType": "div", "style": { "position": "absolute", "top": "0", "left": "0", "right": "0", "bottom": "0" }, "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "style": { "width": "172px", "height": "123px", "position": "relative" }, "children": [ { "📌COMMENT": "Hides the edges of the big folder best we can", "elmType": "div", "style": { "overflow": "hidden", "position": "absolute", "top": "0", "bottom": "0", "left": "0", "right": "0" }, "children": [ { "📌COMMENT": "Big Folder!", "elmType": "svg", "attributes": { "viewBox": "0 0 32 32" }, "style": { "width": "196px", "height": "196px", "position": "absolute", "top": "-37px", "left": "-12px" }, "children": [ { "elmType": "path", "attributes": { "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')" } }, { "elmType": "path", "attributes": { "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')" } }, { "elmType": "path", "attributes": { "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')" } }, { "elmType": "path", "attributes": { "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z" }, "style": { "fill": "#FFFFFF", "opacity": "0.4" } } ] } ] }, { "📌COMMENT": "Folder Details", "elmType": "div", "style": { "position": "absolute", "top": "0", "bottom": "0", "left": "0", "right": "0", "display": "flex", "flex-direction": "column", "color": "white" }, "children": [ { "📌COMMENT": "Child Counts", "elmType": "div", "style": { "display": "flex", "font-size": "10px", "justify-content": "space-around", "width": "70px", "line-height": "22px", "cursor": "pointer" }, "customRowAction": { "action": "defaultClick" }, "children": [ { "elmType": "div", "txtContent": "='📁 ' + [$FolderChildCount]", "attributes": { "title": "Total subfolders" } }, { "elmType": "div", "txtContent": "='📄 ' + [$ItemChildCount]", "attributes": { "title": "Total items" } } ] }, { "📌COMMENT": "Folder Name", "elmType": "div", "txtContent": "[$FileLeafRef]", "style": { "font-size": "20px", "padding": "4px 4px 0 4px", "font-weight": "bold" } }, { "📌COMMENT": "Description", "elmType": "div", "style": { "padding": "0 8px" }, "children": [ { "📌COMMENT": "No description", "elmType": "div", "style": { "font-weight": "lighter", "font-size": "10px", "font-style": "italic", "display": "=if(@currentField, 'none', 'flex')", "align-items": "center", "opacity": "0.8" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Add" }, "style": { "font-size": "8px", "padding-right": "4px" } }, { "elmType": "div", "txtContent": "To add a description, edit this folder in grid view" } ] }, { "elmType": "div", "txtContent": "@currentField", "style": { "display": "=if(@currentField,'','none')", "font-size": "12px", "overflow": "auto", "height": "64px" } } ] } ] } ] } } } ] }, { "📌COMMENT": "Anything not a folder", "elmType": "div", "style": { "position": "relative", "display": "=if(startsWith([$ContentTypeId],'0x0120'),'none','')" }, "children": [ { "elmType": "filepreview", "filePreviewProps": { "fileTypeIconStyle": { "width": "22px", "background-color": "transparent", "top": "1px", "object-fit":"contain" }, "brandTypeIconStyle": { "display": "none" } } }, { "📌COMMENT": "Click Target for Document", "elmType": "div", "style": { "position": "absolute", "top": "0", "left": "0", "right": "0", "bottom": "0" }, "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "filepreview", "style": { "width": "172px" }, "attributes": { "src": "@thumbnail.172" } } } } ] } ] } ```
diver7 commented 7 months ago

Thanks for verifying it's just me @tecchan1107 :D I have tried it in multiple browsers (Edge, Chrome, Firefox) with the same result. I also tried different tenants with the same result. I don't have any extensions on my browser so that can't be it. I tried adding object-fit to the code but that did not help either.

I dug into the page code coming back and found one thing that might be causing it. Not sure why it would be different just for me though. Here is how the page is rendered for me. Notice that the image file for the icons is 96X96 px in size for the fileTypeIcon element while the brandTypeIcon element is using the 16X16 px size.

Can you tell me what version (size) of the icon file your getting?

image

tecchan1107 commented 7 months ago

Thanks for the reply and the test, @diver7 !

Can you tell me what version (size) of the icon file your getting?

In my environment, brandTypeIcon was 24x24 px (16 x 1.5) and fileTypeIcon was 144x144 px (96 x 1.5).

image

Hmmm, I wonder why the icons are different sizes depending on the environment...

diver7 commented 7 months ago

@tecchan1107, I see why I have the issue and you don't. Notice that your IMG elements have a Height and Width attribute and mine do not. By setting the height and width to 100% it will automatically resize the image the size of the container it is in. Now the next question is why do you have those attributes and I do not.

tecchan1107 commented 7 months ago

Notice that your IMG elements have a Height and Width attribute and mine do not. By setting the height and width to 100% it will automatically resize the image the size of the container it is in.

It's true! I hadn't noticed!

image

Now the next question is why do you have those attributes and I do not.

Sorry, I don't know about that... In this sample, fileTypeIcon is displayed with filepreview set to elmType, but I wonder if the specification is such that what is retrieved from this filepreview varies from tenant to tenant...? In any case, only Microsoft people may know. Create an issue in the following repository and maybe you will get an answer from them. https://github.com/SharePoint/sp-dev-docs

image

Also, instead of specifying the width in the filepreview, could it possibly be fixed by specifying the width in the div of the parent element of the filepreview? So I modified the code again. I hope you will give it a try when you have time.

Sample Code (Click to open/close) ``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "justify-content": "center" }, "children": [ { "📌COMMENT": "Folder Icon", "elmType": "div", "style": { "position": "relative", "display": "=if(startsWith([$ContentTypeId],'0x0120'),'','none')" }, "children": [ { "elmType": "svg", "attributes": { "viewBox": "0 0 32 32" }, "style": { "width": "21px", "height": "21px", "padding-top": "4px" }, "children": [ { "elmType": "path", "attributes": { "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')" } }, { "elmType": "path", "attributes": { "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')" } }, { "elmType": "path", "attributes": { "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')" } }, { "elmType": "path", "attributes": { "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z" }, "style": { "fill": "#FFFFFF", "opacity": "0.4" } } ] }, { "📌COMMENT": "Click Target for Folder", "elmType": "div", "style": { "position": "absolute", "top": "0", "left": "0", "right": "0", "bottom": "0" }, "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "style": { "width": "172px", "height": "123px", "position": "relative" }, "children": [ { "📌COMMENT": "Hides the edges of the big folder best we can", "elmType": "div", "style": { "overflow": "hidden", "position": "absolute", "top": "0", "bottom": "0", "left": "0", "right": "0" }, "children": [ { "📌COMMENT": "Big Folder!", "elmType": "svg", "attributes": { "viewBox": "0 0 32 32" }, "style": { "width": "196px", "height": "196px", "position": "absolute", "top": "-37px", "left": "-12px" }, "children": [ { "elmType": "path", "attributes": { "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')" } }, { "elmType": "path", "attributes": { "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')" } }, { "elmType": "path", "attributes": { "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z" }, "style": { "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')" } }, { "elmType": "path", "attributes": { "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z" }, "style": { "fill": "#FFFFFF", "opacity": "0.4" } } ] } ] }, { "📌COMMENT": "Folder Details", "elmType": "div", "style": { "position": "absolute", "top": "0", "bottom": "0", "left": "0", "right": "0", "display": "flex", "flex-direction": "column", "color": "white" }, "children": [ { "📌COMMENT": "Child Counts", "elmType": "div", "style": { "display": "flex", "font-size": "10px", "justify-content": "space-around", "width": "70px", "line-height": "22px", "cursor": "pointer" }, "customRowAction": { "action": "defaultClick" }, "children": [ { "elmType": "div", "txtContent": "='📁 ' + [$FolderChildCount]", "attributes": { "title": "Total subfolders" } }, { "elmType": "div", "txtContent": "='📄 ' + [$ItemChildCount]", "attributes": { "title": "Total items" } } ] }, { "📌COMMENT": "Folder Name", "elmType": "div", "txtContent": "[$FileLeafRef]", "style": { "font-size": "20px", "padding": "4px 4px 0 4px", "font-weight": "bold" } }, { "📌COMMENT": "Description", "elmType": "div", "style": { "padding": "0 8px" }, "children": [ { "📌COMMENT": "No description", "elmType": "div", "style": { "font-weight": "lighter", "font-size": "10px", "font-style": "italic", "display": "=if(@currentField, 'none', 'flex')", "align-items": "center", "opacity": "0.8" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Add" }, "style": { "font-size": "8px", "padding-right": "4px" } }, { "elmType": "div", "txtContent": "To add a description, edit this folder in grid view" } ] }, { "elmType": "div", "txtContent": "@currentField", "style": { "display": "=if(@currentField,'','none')", "font-size": "12px", "overflow": "auto", "height": "64px" } } ] } ] } ] } } } ] }, { "📌COMMENT": "Anything not a folder", "elmType": "div", "style": { "position": "relative", "display": "=if(startsWith([$ContentTypeId],'0x0120'),'none','')", "width": "22px" }, "children": [ { "elmType": "filepreview", "filePreviewProps": { "fileTypeIconStyle": { "width": "100%", "object-fit": "contain", "background-color": "transparent", "top": "1px" }, "brandTypeIconStyle": { "display": "none" } } }, { "📌COMMENT": "Click Target for Document", "elmType": "div", "style": { "position": "absolute", "top": "0", "left": "0", "right": "0", "bottom": "0" }, "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "filepreview", "style": { "width": "172px" }, "attributes": { "src": "@thumbnail.172" } } } } ] } ] } ```

image

tecchan1107 commented 7 months ago

After replying, I suddenly reconsidered and realized that the modified code might not solve the problem because the img width is not set to 100%...

tecchan1107 commented 7 months ago

I applied the modified code and tried removing width:100% from img in the developer tools. As I thought, the modified code seemed to be no good... Sorry😣😣

image