SharePoint
List Format View height and width not work
Target SharePoint environment
SharePoint Online
What SharePoint development model, framework, SDK or API is this about?
💥 SharePoint Framework
Developer environment
None
What browser(s) / client(s) have you tested
- [ ] 💥 Internet Explorer
- [X] 💥 Microsoft Edge
- [X] 💥 Google Chrome
- [X] 💥 FireFox
- [ ] 💥 Safari
- [ ] mobile (iOS/iPadOS)
- [ ] mobile (Android)
- [ ] not applicable
- [ ] other (enter in the "Additional environment details" area below)
Additional environment details
- Microsoft Edge 128.0.2739.67
- Google Chrome 130.0.6723.70
- Firefox
Describe the bug / error
when using format view as design mode, the height as below:
after change to advanced mode as below (do not change anything):
the default code as below:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 446,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"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": "div",
"attributes": {
"class": "sp-card-imageContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if([$_x8fd0__x884c__x6548__x679c__x56] == '', 'none', '')"
},
"attributes": {
"src": "=getThumbnailImage([$_x8fd0__x884c__x6548__x679c__x56], 400, 400)",
"title": "[$_x8fd0__x884c__x6548__x679c__x56.fileName]",
"class": "sp-card-imagePreview"
}
},
{
"elmType": "svg",
"style": {
"display": "=if([$_x8fd0__x884c__x6548__x679c__x56] == '', '', 'none')"
},
"attributes": {
"preserveAspectRatio": "none",
"viewBox": "0 0 210 105",
"class": "sp-card-defaultImage ms-bgColor-themeLighter"
},
"children": [
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImage-path1",
"d": "M0 25.7896L126.5 53.8817L96 105H0V25.7896Z"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImage-path2",
"d": "M96 105L158.7 0H204C207.314 0 210 2.68629 210 6V105H96Z"
}
}
]
},
{
"elmType": "svg",
"style": {
"display": "=if([$_x8fd0__x884c__x6548__x679c__x56] == '', '', 'none')"
},
"attributes": {
"class": "sp-card-defaultImageOverlay",
"viewBox": "0 0 40 40"
},
"children": [
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path1",
"d": "M 4 4 H 37 V 37 H 4 L 4 4"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path2",
"d": "M24.17 21.151L21.66 24.741L17.54 19.191C17.3322 18.914 17.0062 18.751 16.66 18.751C16.3137 18.751 15.9877 18.914 15.78 19.191L9.20997 28.051C8.97126 28.3786 8.93818 28.813 9.12453 29.173C9.31088 29.533 9.68465 29.7567 10.09 29.751H29.91C30.3085 29.7562 30.6769 29.5396 30.866 29.1887C31.0551 28.8378 31.0335 28.411 30.81 28.081L26 21.151C25.7991 20.8407 25.4546 20.6533 25.085 20.6533C24.7153 20.6533 24.3709 20.8407 24.17 21.151Z"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path3",
"d": "M28 15.751C29.3807 15.751 30.5 14.6317 30.5 13.251C30.5 11.8703 29.3807 10.751 28 10.751C26.6193 10.751 25.5 11.8703 25.5 13.251C25.5 14.6317 26.6193 15.751 28 15.751Z"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path4",
"d": "M4.5 37.251H35.5C36.3284 37.251 37 36.5794 37 35.751V4.75098C37 3.92255 36.3284 3.25098 35.5 3.25098H4.5C3.67157 3.25098 3 3.92255 3 4.75098V35.751C3 36.5794 3.67157 37.251 4.5 37.251ZM4 4.75098C4 4.47483 4.22386 4.25098 4.5 4.25098H35.5C35.7761 4.25098 36 4.47483 36 4.75098V35.751C36 36.0271 35.7761 36.251 35.5 36.251H4.5C4.22386 36.251 4 36.0271 4 35.751V4.75098Z"
}
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Title.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!agenturl.DisplayName]"
},
{
"elmType": "a",
"attributes": {
"title": "[$agenturl]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-keyboard-focusable",
"href": "[$agenturl]",
"target": "=if ([$agenturl] == '', '', '_blank')"
},
"style": {
"pointer-events": "=if ([$agenturl] == '', 'none', 'auto')",
"text-decoration": "=if ([$agenturl] == '', 'none', 'auto')"
},
"txtContent": "=if ([$agenturl.desc] == '', '–', [$agenturl.desc])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!LikesCount.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$LikesCount]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-likes"
},
"children": [
{
"elmType": "span",
"attributes": {
"class": "sp-card-heartIcon",
"iconName": "=if (length(removeFrom([$LikedBy.email],@me)) == length([$LikedBy]), 'Heart', 'HeartFill')"
}
},
{
"elmType": "span",
"txtContent": "=if ([$LikesCount] == '', 0, [$LikesCount])"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-previewColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!LikedBy.DisplayName]"
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$LikedBy]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$LikedBy]",
"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', '')"
},
"defaultHoverField": "[$personIterator]",
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
},
"style": {
"display": "=if(length([$LikedBy]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$LikedBy]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$LikedBy]",
"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([$LikedBy]) - (4))"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-userTitle sp-card-keyboard-focusable"
},
"style": {
"display": "=if(length([$LikedBy]) == 1, '', 'none')"
},
"defaultHoverField": "[$personIterator]",
"txtContent": "[$LikedBy.title]"
}
]
}
]
}
]
}
]
}
}
but when i save the format view and refresh page, the view as below:
the height become small and i cannot adjust by update the attribute ‘height’.
Steps to reproduce
1.create a view, select some fields. 2.open format current view and use design mode to pick up some fields. 3.switch to advance mode, save view and refresh page. 4. the card become shorter, and some fields will be blocked.
Expected behavior
the card view could show all the information and could adjust by attribute ‘height’.
Dear Mr. @MatrixYe23
Did you try:
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": "446px",
"width": "254px",
Dear Mr. @MatrixYe23
Did you try:
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": "446px", "width": "254px",
Dear Mr. @aaclage try but still not work
Mr. @MatrixYe23
What type of View "Gallery" or "List"? If not gallery, can you try create new View > "Gallery" and include the formatting?
same issue here All my gallery view lists where I customized by json are now "squeezed". Yeasterday everthing was fine 😥
same issue here All my gallery view lists where I customized by json are now "squeezed". Yeasterday everthing was fine 😥
Ok could be a rollback. let's wait if there is a response from msft?
@aaclage @MatrixYe23 @louj88 This issue was identified and fixed by the team last week. Fix will be in production in 2 weeks.
This is wrecking my views. It looks like the sizes in the parent elements (outside of what is customizable in JSON) are overriding the height/widths.
@tpodugu-ms Is there a workaround available? Our views are currently not functioning, rendering SharePoint unusable for everyone who needs these customized views.
@tpodugu-ms Is there a workaround available? Our views are currently not functioning, rendering SharePoint unusable for everyone who needs these customized views.
The only thing I was able to do with mine was set overflow to scroll. That at least stopped tiles from overlapping one another.
It looks to be resolved on our end, the formatting is appearing properly THANKYOU!
If you're using SharePoint on the web, SHIFT + F5 should give it the boot it needs.
It got normalized here too, but SHIFT + F5 was mandatory to every user here so far.
I'm still experiencing issues with the custom formatted tile view, and a hard refresh hasn't resolved it. @tpodugu-ms , could you please confirm if the fix has been implemented?
A two-week wait is just unacceptable. Isn't there a rollback option or workaround? We cannot use many of our sites due to the views not working, making Sharepoint unusable for many sites. how was such a bug pushed into production anyway? are these changes not tested?
@tpodugu-ms same problem here !!
A two-week wait is just unacceptable. Isn't there a rollback option or workaround? We cannot use many of our sites due to the views not working, making Sharepoint unusable for many sites. how was such a bug pushed into production anyway? are these changes not tested?
@tpodugu-ms same problem here !!
I have seen this problem on 4 different tenants and worked with my customer to find a workaround. Using "fillHorizontally": true and setting the height and width directly on the formatter + override the css with a SpFx App Customizer with following styles:
.cfRowFillHorizontally {
display: block;
}
.sp-list-gallery-tile {
height: 800px !important; <= where 800 is the height of your tile
}
This is not perfect if you having different sizes of tiles in different lists on your site it gets complicated. Hope MS get a fix out soon.
A two-week wait is just unacceptable. Isn't there a rollback option or workaround? We cannot use many of our sites due to the views not working, making Sharepoint unusable for many sites. how was such a bug pushed into production anyway? are these changes not tested?
@tpodugu-ms same problem here !!
I have seen this problem on 4 different tenants and worked with my customer to find a workaround. Using "fillHorizontally": true and setting the height and width directly on the formatter + override the css with a SpFx App Customizer with following styles:
.cfRowFillHorizontally { display: block; } .sp-list-gallery-tile { height: 800px !important; <= where 800 is the height of your tile }This is not perfect if you having different sizes of tiles in different lists on your site it gets complicated. Hope MS get a fix out soon.
thanks, I will give this workaround a try
the problem just seems to have corrected itself on my sharepoint site
the problem just seems to have corrected itself on my sharepoint site
I see it to on my tenants :)
Hello @MatrixYe23, Thank You for your patience. Is the issue resolved now?
We are closing this issue for now. If the problem persists, feel free to reopen it or open a new one.