Yearly Gantt Chart Column Width Issue

[DeniseO]

Hi there!

I was applying this list view: Yearly Gantt

However, I noticed that when I hover over the period to see the start and end dates of the item, the total width gets reduced.

Normal view:

Hover view:

Once I remove the cursor the column width gets back to normal.
Also noticed that if I remove the code for the customCardProps section, the issue disappears.
Have you seen this issue?

This is the code I have on the column in case is needed:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "margin": "5px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "space-between", "width": "100%", "margin-bottom": "3px" }, "attributes": { "class": "ms-fontColor-gray130 ms-fontWeight-bold" }, "children": [ { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Jan" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Feb" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Mar" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Apr" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "May" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Jun" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Jul" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Aug" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Sep" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Oct" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Nov" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "Dec" } ] }, { "elmType": "div", "style": { "display": "flex", "width": "100%", "border": "2px solid", "height": "20px" }, "attributes": { "class": "ms-fontColor-gray100" }, "children": [ { "elmType": "div", "style": { "position": "relative", "cursor": "pointer", "width": "=((getMonth([$EndDate]) - getMonth([$StartDate]) + 1) / 12) * 100 + '%'", "left": "=((getMonth([$StartDate])) / 12) * 100 + '%'", "background-color": "=if([$Status] == 'Complete', 'green', if([$Status] == 'Confirmed', 'yellow', if([$Status] == 'Tentative', '#40587C', 'transparent')))" }, "customCardProps": { "directionalHint": "topCenter", "isBeakVisible": true, "openOnEvent": "hover", "formatter": { "elmType": "div", "style": { "display": "flex", "position": "relative", "align-items": "center", "justify-content": "center", "width": "250px", "height": "30px", "margin": "10px", "font-weight": "bold" }, "attributes": { "class": "ms-fontSize-l" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "txtContent": "[$StartDate.displayValue]" }, { "elmType": "span", "style": { "margin-left": "5px", "margin-right": "5px" }, "txtContent": "-" }, { "elmType": "span", "txtContent": "[$EndDate.displayValue]" } ] } ] } } } ] } ] }

Thanks for your help!
Denise

[tpodugu-ms]

@DeniseO Thanks for reporting the issue. I will let the team know regarding this and update the status here.