Comments (6)
Yachtyyyy
commented on July 18, 2024
1
Thank you, the code solved my problem.
Thank you for your time and effort.👍
from list-formatting.
tecchan1107
commented on July 18, 2024
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]"
}
]
}
]
}
]
}
]
}
}
from list-formatting.
aaclage
commented on July 18, 2024
Hi @Yachtyyyy
On the list webpart can you provide what size are you using? Maybe this is having impact on your height.
from list-formatting.
Yachtyyyy
commented on July 18, 2024
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.
from list-formatting.
Yachtyyyy
commented on July 18, 2024
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.
from list-formatting.
tecchan1107
commented on July 18, 2024
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.
from list-formatting.
Related Issues (20)
- I have a question about the Discussion Board sample. HOT 3
- date-page-a-day-calendar displays day before in central time zone HOT 2
- Cannot embed video from SharePoint HOT 1
- Displaying a new column which is a hyperlink in list formatting HOT 12
- document-library-thumbnails not all documents are previewing HOT 8
- Unable to update column containing deleted user with setValue HOT 1
- Sample - yesno-icon-color not working as intended HOT 5
- I have a question about honeycomb-link when used with an embedded webpart HOT 2
- I have a question about formatting a column that contains a JSON string HOT 2
- I have a question about JSON code in lists HOT 2
- Generic Gantt chart - Date field cannot be edited HOT 5
- Birthday Sample, does not populate birthday. HOT 5
- No longer works as it used to: form-samples/wrapped-body HOT 2
- Gallery View: Scaling of SVG files HOT 1
- Changes made by GENERIC-UPDATE-BUTTON are not immediately visible to other users HOT 2
- group-header-remove-column-name-clickable has made me sad, please help HOT 5
- Links do not open in Microsoft Lists App in some samples HOT 6
- I have a question about Praise Cards HOT 3
- Remove 'Editing' Worry From 'Custom Charts' - view-samples/custom-charts HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from list-formatting.