Forum Discussion
dKayt
Mar 13, 2024Copper Contributor
View formating - How to make defined area clickable
Hello,
I'm formating a SharePoint List and I want to make certain area clickable. Somehow I just have one area clickable.
Does anyone know if I am making a mistake?
Thanks, dKayt
Here ist my code :
{
"elmType": "div",
"style": {
"position": "absolute",
"top": "0",
"bottom": "0",
"right": "0",
"left": "0"
},
"children": [
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 1100 800",
"class": "ms-fontColor-themePrimary"
},
"style": {
"opacity": "1",
"stroke": "red"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "[$href]",
"alt": "[$alt]",
"target": "_blank"
},
"children": [
{
"elmType": "path",
"attributes": {
"title": "[$alt]",
"d": "[$coords]"
},
"style": {
"fill": "yellow"
},
"customCardProps": {
"openOnEvent": "hover",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"txtContent": "[$alt]",
"style": {
"padding": "10px"
}
}
}
}
]
}
]
}
]
}
Hi ganeshsanap
Thanks for replying.
I change the structure of my code and it works now:
"children": [ { "elmType": "svg", "attributes": { "viewBox": "0 0 1100 300" }, "style": { "opacity": "1", "stroke": "green" }, "children": [ { "elmType": "a", "attributes": { "href": "[$href]", "alt": "[$alt]", "target": "_blank" }, "children": [ { "elmType": "path", "attributes": { "title": "[$Title]", "d": "[$coords]" }, "style": { "fill": "red" }, "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "txtContent": "[$Title]", "style": { "padding": "10px" } }, "isBeakVisible": true } } ] } ] } ]
Best Regards, dKayt
The element created in DOM using a elmType should cover whole parent element area to be clickable inside complete parent element.
Try adding this JSON piece for a elmType:
"style": { "width": "100%", "height": "100%" },
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- dKaytCopper Contributor
Hi ganeshsanap
Thanks for replying.
I change the structure of my code and it works now:
"children": [ { "elmType": "svg", "attributes": { "viewBox": "0 0 1100 300" }, "style": { "opacity": "1", "stroke": "green" }, "children": [ { "elmType": "a", "attributes": { "href": "[$href]", "alt": "[$alt]", "target": "_blank" }, "children": [ { "elmType": "path", "attributes": { "title": "[$Title]", "d": "[$coords]" }, "style": { "fill": "red" }, "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "txtContent": "[$Title]", "style": { "padding": "10px" } }, "isBeakVisible": true } } ] } ] } ]
Best Regards, dKayt