Forum Discussion
SharePoint View Formatting
- Jul 18, 2022
Not sure why you had the card view selected. The card view will only display one row of data in the card. If you are looking for a table of data, you can use a list view, but make it look like a card. To answer your actual question about fixed with, below is your sample with a fixed overall width of 600px and a fixed Country($title) width of 200px. The remaining columns are flexed to fill the remaining width evenly. Hope this helps.
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start" }, "attributes": { "class": "" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "text-align": "left", "width": "600px" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-row-title" }, "style": { "flex": "0 0 200px" }, "txtContent": "[$Title]" }, { "elmType": "div", "style": { "flex": "1" }, "txtContent": "[$Gold]" }, { "elmType": "div", "style": { "flex": "1" }, "txtContent": "[$Silver]" }, { "elmType": "div", "style": { "flex": "1" }, "txtContent": "[$Bronze]" }, { "elmType": "div", "style": { "flex": "1" }, "txtContent": "[$Total]" } ] } ] } }
Take care,
Don
Please click Mark as Best Response & Like if my post helped you to answer or resolve 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 a Like.
Not sure why you had the card view selected. The card view will only display one row of data in the card. If you are looking for a table of data, you can use a list view, but make it look like a card. To answer your actual question about fixed with, below is your sample with a fixed overall width of 600px and a fixed Country($title) width of 200px. The remaining columns are flexed to fill the remaining width evenly. Hope this helps.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start"
},
"attributes": {
"class": ""
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"text-align": "left",
"width": "600px"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"style": {
"flex": "0 0 200px"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"flex": "1"
},
"txtContent": "[$Gold]"
},
{
"elmType": "div",
"style": {
"flex": "1"
},
"txtContent": "[$Silver]"
},
{
"elmType": "div",
"style": {
"flex": "1"
},
"txtContent": "[$Bronze]"
},
{
"elmType": "div",
"style": {
"flex": "1"
},
"txtContent": "[$Total]"
}
]
}
]
}
}
Take care,
Don
Please click Mark as Best Response & Like if my post helped you to answer or resolve 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 a Like.