tecchan1107
commented
2 weeks ago Hi @Yachtyyyy .
I have tried to reduce the margins as much as possible, how about the following code?
Closed Yachtyyyy closed 2 weeks ago
tecchan1107
commented
2 weeks ago Hi @Yachtyyyy .
I have tried to reduce the margins as much as possible, how about the following code?
aaclage
commented
2 weeks ago Hi @Yachtyyyy
On the list webpart can you provide what size are you using? Maybe this is having impact on your height.
Yachtyyyy
commented
2 weeks ago 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.
Yachtyyyy
commented
2 weeks ago @tecchan1107
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.
tecchan1107
commented
2 weeks ago 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?
In addition, please make sure that the URL column is set to a value.
Yachtyyyy
commented
2 weeks ago Thank you, the code solved my problem.
Thank you for your time and effort.👍
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]" } ] } ] } ] } ] } }