JSON - Sharepoint Formatting Row View

Madeline LeClair 1 Reputation point
2022-09-20T17:54:48.153+00:00

Hello. Happy Tuesday.

I have custom JSON formatting, i changed it up a bit from the original and i got stuck with how to get this 'div' on the left to match the height of the "div" on the right when it expands due to wrapping... Ultimately i would love for it to match the height.

At very least, cut off the text upon adjusting the width...That is last resort.

I took from github List view samples originally..

243049-coverp.png

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideListHeader": true,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"position": "relative",
"width": "100%",
"height": "100%",
"margin": "5px 0"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-bgColor-white ms-bgColor-themeLighter--hover"
},
"style": {
"width": "100%",
"display": "flex",
"padding": 0,
"height": "100%",
"border": "none",
"cursor": "pointer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-borderColor-themePrimary ms-bgColor-themePrimary"
},
"style": {
"min-width": "150px",
"display": "flex",
"border-width": "1px",
"border-style": "solid",
"height": "100%",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "=if([$Category] == 'Action Needed', 'warning', if([$Category] == 'Documentation', 'Document', if([$Category] == 'Information', 'Info', 'Tag')))",
"class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white",
"title": "[$Category]"
},
"style": {
"flex": "none",
"padding": "10px",
"padding-left": "18px",
"padding-top": "16px",
"height": "100%"
}
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"text-align": "left",
"max-width": "100px"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontSize-m ms-fontWeight-semibold ms-fontColor-white",
"title": "=toLocaleDateString([$Modified])"
},
"style": {
"margin-right": "12px",
"overflow": "hidden",
"white-space": "nowrap"
},
"txtContent": "=toLocaleDateString([$Modified])"
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontSize-l ms-fontWeight-normal ms-fontColor-white",
"title": "[$Category]"
},
"style": {
"margin-right": "12px",
"overflow": "hidden",
"white-space": "nowrap",
"height": "100%",
"font-size": "11px"
},
"txtContent": "[$Category]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-l"
},
"style": {
"border-width": ".1mm",
"border-style": "solid",
"box-sizing": "border-box",
"width": "100%",
"height": "100%",
"text-align": "left",
"padding": "10px 28px 11px 15px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"height": "100%",
"font-size": "12px"
},
"attributes": {
"title": "[$Title]",
"class": "ms-fontWeight-normal"
}
},
{
"elmType": "a",
"txtContent": "=if ([$Category] == 'Action Needed', [$TakeActionText], '')",
"attributes": {
"target": "_blank",
"class": "ms-fontSize-s ms-fontWeight-semibold ms-fontColor-lightblue",
"href": "[$TakeAction]"
}
}
]
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "share"
},
"attributes": {
"class": "ms-fontColor-themeLight ms-fontColor-themeDark--hover",
"title": "Share Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"position": "absolute",
"top": "12px",
"right": "0"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Share",
"class": "ms-font-l"
}
}
]
}
]
}
}
Tagging @RandyHayes since it's been a while.

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,849 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,708 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Xuyan Ding - MSFT 7,561 Reputation points
    2022-09-21T02:58:09.133+00:00

    Hi @Madeline LeClair ,

    Per my test,it should not be changed, this line is full and automatically goes to the next line, unless it is limited to only one line.
    My suggestion is to limit the maximum number of characters.
    243318-image.png


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.