Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
diver7 opened this issue Nov 9, 2023 · 7 comments
Open

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

diver7 opened this issue Nov 9, 2023 · 7 comments
Labels
🐞 Bug Issue with one of the samples

Comments

@diver7
Copy link

diver7 commented Nov 9, 2023

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
@diver7 diver7 added the 🐞 Bug Issue with one of the samples label Nov 9, 2023
@tecchan1107
Copy link
Collaborator

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) 
{
  "$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
Copy link
Author

diver7 commented Nov 13, 2023 •
edited

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
Copy link
Collaborator

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
Copy link
Author

diver7 commented Nov 14, 2023

@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
Copy link
Collaborator

tecchan1107 commented Nov 15, 2023 •
edited

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) 
{
  "$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
Copy link
Collaborator

tecchan1107 commented Nov 15, 2023 •
edited

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
Copy link
Collaborator

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

@diver7 diver7 mentioned this issue Nov 15, 2023
Open
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐞 Bug Issue with one of the samples
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@diver7 @tecchan1107