Sharepoint list how to wrap text in gallery view

Occasional Visitor
Hi. Can anyone tell me how to format text when viewing in gallery mode so that the text wraps within the tile? Guessing this is probably some JSON coding?
7 Replies

@Dc111222 You are right. You have to customize the card designer JSON for gallery view & add style to the element where you want to wrap the text.

 

You can use the styles like word-wrap in JSON. Full list of supported styles is given at: SharePoint JSON Formatting - style 

 

You can find detailed step about how to customize the card design JSON for gallery view in below post:

Change the width of a card in Gallery view of a List  


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

 I inadvertently posted this question on another board. I'm not a programmer and just getting introduced to JSON via my duties in SharePoint.  I can get the following to work on Kudos field via column formatting.  I can see this in list view. How do I get same word wrap formatting added to gallery tile view JSON?  When I add the following to JSON in gallery view, the text field disappears.  Kudos is single line text field.   I'll be able to adjust the tile height/width but stuck on word wrap. Thank you in advance. 

 

{"elmType": "div", "style":{ "white-space":"wrap" }, "txtContent": "@Kudos" }

 

Where does the above json go in gallery view JSON below?

{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Kudos.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Kudos]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
},
"txtContent": "=if ([$Kudos] == '', '–', [$Kudos])"
}
]
}

 

 

 

@ganeshsanap

@JeffThiel Try using below JSON:

 

{
  "elmType": "div",
  "attributes": {
    "class": "sp-card-displayColumnContainer"
  },
  "children": [
    {
      "elmType": "p",
      "attributes": {
        "class": "ms-fontColor-neutralSecondary sp-card-label"
      },
      "txtContent": "[!Kudos.DisplayName]"
    },
    {
      "elmType": "p",
      "attributes": {
        "title": "[$Kudos]",
        "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
      },
      "txtContent": "=if ([$Kudos] == '', '–', [$Kudos])",
      "style": {
        "white-space": "wrap"
      }
    }
  ]
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap Thank you very much for your reply.  Unfortunately, I'm unable to get the text in field to wrap in gallery view.  JSON below directly from gallery view...  I can see word wrap in list field but not when in gallery view.  Afraid i'm missing something simple here.  Even if I increase height/width of card Kudos text field does not wrap.  Please help when you get a moment.  And thank you.

 

{
"height": 269,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "button",
"attributes": {
"class": "sp-card-defaultClickButton",
"role": "presentation"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-previewColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Nominee.DisplayName]"
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$Nominee]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Nominee]",
"elmType": "a",
"attributes": {
"class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
},
"style": {
"display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
},
"style": {
"display": "=if(length([$Nominee]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$Nominee]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$Nominee]",
"elmType": "div",
"attributes": {
"class": "sp-card-userContainer sp-card-userCustomCard"
},
"style": {
"display": "=if(loopIndex('personIterator') < 4, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
}
}
]
}
]
},
"openOnEvent": "hover"
},
"children": [
{
"elmType": "span",
"txtContent": "='+' + toString(length([$Nominee]) - (4))"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-userTitle"
},
"style": {
"display": "=if(length([$Nominee]) == 1, '', 'none')"
},
"defaultHoverField": "[$personIterator]",
"txtContent": "[$Nominee.title]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Kudos.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Kudos]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
},
"txtContent": "=if ([$Kudos] == '', '–', [$Kudos])",
"style": {
"white-space": "wrap"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Created.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$Created.displayValue] == '', '–', [$Created.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Created.displayValue] == '', '–', [$Created.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-previewColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Author.DisplayName]"
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$Author]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Author]",
"elmType": "a",
"attributes": {
"class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
},
"style": {
"display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
},
"style": {
"display": "=if(length([$Author]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$Author]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$Author]",
"elmType": "div",
"attributes": {
"class": "sp-card-userContainer sp-card-userCustomCard"
},
"style": {
"display": "=if(loopIndex('personIterator') < 4, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
}
}
]
}
]
},
"openOnEvent": "hover"
},
"children": [
{
"elmType": "span",
"txtContent": "='+' + toString(length([$Author]) - (4))"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-userTitle"
},
"style": {
"display": "=if(length([$Author]) == 1, '', 'none')"
},
"defaultHoverField": "[$personIterator]",
"txtContent": "[$Author.title]"
}
]
}
]
}
]
}
]
}
}

@JeffThiel Have you ever gotten this to work? I'm stuck at the same thing here.

No, unfortunately I did not.  

@ganeshsanap

Hi,
Would you be so kind and help us out here? Neither for myself, nor for  your input worked as expected.