Forum Discussion
SharePoint List JSON Formatting - Layout elements horizontally instead of vertically
How to I change the JSON below so that the elements shown in the screenshot are laid out horizontally instead of vertically?
Thank you,
Ed
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": false,
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-card"
},
"children": [
{
"elmType": "div",
"style": {
"margin-left": "10px",
"margin-right": "25px",
"height": "130px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "@thumbnail.large",
"title": "[$Title]"
},
"style": {
"border": "1px solid #808080",
"border-radius": "2%",
"width": "100%"
}
}
]
},
{
"elmType": "div",
"style": {
"text-align": "left",
"border-left": "2px solid rgba(200, 200, 200, 0.5)",
"padding-left": "2px"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"style": {
"font-weight": "semi-bold",
"font-size": "x-large",
"margin-left": "10px"
},
"txtContent": "=if([$TalkTitle] == '', [$FileLeafRef], [$TalkTitle])"
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"margin-left": "10px",
"font-size": "larger"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "bold"
},
"txtContent": "Duration: "
},
{
"elmType": "span",
"txtContent": "[$Duration]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"margin-left": "10px",
"font-size": "larger"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "bold"
},
"txtContent": "DDD Year: "
},
{
"elmType": "span",
"txtContent": "[$DDDYear]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"margin-left": "10px",
"font-size": "larger"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "bold"
},
"txtContent": "Speaker Name: "
},
{
"elmType": "span",
"txtContent": "[$SpeakerName]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"margin-left": "10px",
"font-size": "larger"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "bold"
},
"txtContent": "Business Area: "
},
{
"elmType": "span",
"txtContent": "[$BusinessArea]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"margin-left": "10px",
"font-size": "larger"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "bold"
},
"txtContent": "Product Name: "
},
{
"elmType": "span",
"txtContent": "[$ProductName]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"margin-left": "10px",
"font-size": "larger"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "bold"
},
"txtContent": "General Subject/Concept: "
},
{
"elmType": "span",
"txtContent": "[$GeneralSubject_x002f_Concept]"
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"style": {
"width": "150px",
"margin-left": "10px",
"display": "span"
},
"txtContent": "Watch Now",
"attributes": {
"class": "sp-row-button ms-bgColor-purple sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
}
},
{
"elmType": "button",
"customRowAction": {
"action": "share"
},
"style": {
"width": "150px",
"margin-left": "10px"
},
"txtContent": "Share",
"attributes": {
"class": "sp-row-button ms-bgColor-grey sp-row-button ms-bgColor-purpleDark--hover ms-fontColor-white--hover"
}
},
{
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"style": {
"width": "150px",
"margin-left": "10px",
"display": "span"
},
"txtContent": "View Details",
"attributes": {
"class": "sp-row-button ms-bgColor-grey sp-row-button ms-bgColor-purpleDark--hover ms-fontColor-white--hover"
}
}
]
}
]
}
}- Hi
To change the layout of the elements from vertical to horizontal, you can use the display property in CSS. Specifically, you can set display to flex or inline-flex to make the elements display horizontally.
Thanks!Hi Ankit,
Thanks for your reply. I'm only able to edit the JSON and it's only the elements that I circled in green that I'm looking to layout horizontally. Do you know how the changes can be made in the JSON?
Thank you,
Ed
- Hi Edward,
Sure will provide you JSON code shortly !!
Thanks
