honeycomb SAMPLE has made me sad, please help
Closed this issue · 6 comments
Sample (which sample are you having trouble with)
view-samples/honeycomb-link/honeycomb-link.json
What Should Happen
The honeycombs should finish right after the third row.
What Actually Happens
The honeycombs take up more space than necessary because the size has been adjusted to save space.
I would thank you very much for a solution.
My code:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"height": "150px",
"display": "=if(@rowIndex%3==0,'','none')"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "100px",
"height": "150px",
"left": "=if(floor(@rowIndex/3)%3==1,@rowIndex%3120+'px',@rowIndex%2120+60.5+'px')",
"top": "=if(@rowIndex%3==0,'','-150px')"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"height": "60%",
"top": "=if(floor(@rowIndex/3)>0,floor(@rowIndex/3)*-45+'px','')"
},
"attributes": {
"href": "[$URL]",
"target": "_blank",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
]
}
}
Hi @Yachtyyyy .
I have tried to reduce the margins as much as possible, how about the following code?
Sample Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"height": "90px",
"display": "=if(@rowIndex%2==0,'','none')"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"left": "=if(@rowIndex%5==0,'50px',if(@rowIndex%5==1,'150px',if(@rowIndex%5==2,'0px',if(@rowIndex%5==3,'100px',if(@rowIndex%5==4,'200px','')))))",
"margin-bottom": "=if(if(@rowIndex%5==0,'0px',@rowIndex%5==1,'90px',if(@rowIndex%5==2,'-50px',if(@rowIndex%5==3,'40px',if(@rowIndex%5==4,'130px',''))))"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "90px",
"height": "90px"
},
"attributes": {
"href": "[$URL]",
"target": "_blank",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
]
}
}
Hi @Yachtyyyy
On the list webpart can you provide what size are you using? Maybe this is having impact on your height.
Hello @aaclage
Thanks for trying to help me but I have already selected "autosize". Another option was not possible because otherwise the honeycombs would be cut off and a scroll bar would be created.
Thanks, the new code solves my problem, but there is still a small bug:
With these 3 tiles you can't click anywhere to open a page.
I appreciate your help.
With these 3 tiles you can't click anywhere to open a page.
In my environment, I was able to open the link without any problem. (In the following video, Ctrl is held down while clicking on the link so that the link is not displayed.)
Hmmm, wonder what would cause... Maybe it is not clickable because of some overlapping elements, how about the following code with the z-index added?
Sample Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"height": "90px",
"display": "=if(@rowIndex%2==0,'','none')"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"left": "=if(@rowIndex%5==0,'50px',if(@rowIndex%5==1,'150px',if(@rowIndex%5==2,'0px',if(@rowIndex%5==3,'100px',if(@rowIndex%5==4,'200px','')))))",
"margin-bottom": "=if(if(@rowIndex%5==0,'0px',@rowIndex%5==1,'90px',if(@rowIndex%5==2,'-50px',if(@rowIndex%5==3,'40px',if(@rowIndex%5==4,'130px',''))))"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "90px",
"height": "90px",
"z-index":"1"
},
"attributes": {
"href": "[$URL]",
"target": "_blank",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
]
}
}In addition, please make sure that the URL column is set to a value.
Thank you, the code solved my problem.
Thank you for your time and effort.👍