Sharepoint List Spacing
New to creating things via sharepoint. What I want is to have 4 selectable buttons that are 150px x 100px with the title shown and upon selecting the content it would open the link to a different site in a new tab. Everything works as it should, minus the huge space between the text/buttons. This is created via a list. I need all 4 to be on the same plane and ideally always be 600px wide combined
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json”,
“hideSelection”: true,
“hideColumnHeader”: true,
“fillHorizontally”: true,
“formatter”: {
“elmType”: “div”,
“attributes”: {
“class”: “sp-card-container”
},
“style”: {
“display”: “flex”,
“flex-wrap”: “wrap”,
“margin”: “10px”,
“gap”: “10px”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “ms-bgColor-white”
},
“style”: {
“height”: “100px”,
“width”: “150px”,
“justify-content”: “center”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“onclick”: “window.open(‘[$Link]’, ‘_blank’)”
},
“children”: [
{
“elmType”: “a”,
“attributes”: {
“title”: “[$Title]”,
“href”: “[$Link]”,
“target”: “=if ([$Link] == ”, ”, ‘_blank’)”
},
“txtContent”: “=if ([$Title] == ”, ‘–’, [$Title])”,
“style”: {
“color”: “#000000”,
“font-weight”: “regular”,
“font-size”: “40px”,
“padding”: “10px”,
“text-decoration”: “none”
}
}
]
}
]
}
]
}
}
New to creating things via sharepoint. What I want is to have 4 selectable buttons that are 150px x 100px with the title shown and upon selecting the content it would open the link to a different site in a new tab. Everything works as it should, minus the huge space between the text/buttons. This is created via a list. I need all 4 to be on the same plane and ideally always be 600px wide combined {
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json”,
“hideSelection”: true,
“hideColumnHeader”: true,
“fillHorizontally”: true,
“formatter”: {
“elmType”: “div”,
“attributes”: {
“class”: “sp-card-container”
},
“style”: {
“display”: “flex”,
“flex-wrap”: “wrap”,
“margin”: “10px”,
“gap”: “10px”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “ms-bgColor-white”
},
“style”: {
“height”: “100px”,
“width”: “150px”,
“justify-content”: “center”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“onclick”: “window.open(‘[$Link]’, ‘_blank’)”
},
“children”: [
{
“elmType”: “a”,
“attributes”: {
“title”: “[$Title]”,
“href”: “[$Link]”,
“target”: “=if ([$Link] == ”, ”, ‘_blank’)”
},
“txtContent”: “=if ([$Title] == ”, ‘–’, [$Title])”,
“style”: {
“color”: “#000000”,
“font-weight”: “regular”,
“font-size”: “40px”,
“padding”: “10px”,
“text-decoration”: “none”
}
}
]
}
]
}
]
}
} Read More
