asked on October 13, 2025
In Pivot table when it has horizontal scroll and i scroll to full left. on realtime data update it flickers the view.This happens when below css is present as i want to give custom width to columns in pivot view based on data present.
Note: This works fine when there is no horizontal scroll i.e all columns are visible without need of scroll. If number of columns is more then to fit in screen and scroll is enabled the flicker issue is observed when there are realtime updates and custom width given through css.
This is my css .
angular-positionview .fm-cell[data-c="0"] {
min-width: 200px !important;
max-width: 200px !important;
}
angular-positionview .fm-cell[data-c="1"] {
min-width: 55px !important;
max-width: 55px !important;
}
angular-positionview .fm-cell[data-c="2"] {
min-width: 70px !important;
max-width: 70px !important;
}
angular-positionview .fm-cell[data-c="3"] {
min-width: 100px !important;
max-width: 100px !important;
}
angular-positionview .fm-cell[data-c="4"] {
min-width: 100px !important;
max-width: 100px !important;
}
angular-positionview .fm-cell[data-c="5"] {
min-width: 131px !important;
max-width: 131px !important;
}
angular-positionview .fm-cell[data-c="6"] {
min-width: 131px !important;
max-width: 131px !important;
}
angular-positionview .fm-cell[data-c="7"] {
min-width: 131px !important;
max-width: 131px !important;
}
angular-positionview .fm-cell[data-c="8"] {
min-width: 131px !important;
max-width: 131px !important;
}
angular-positionview .fm-cell[data-c="9"] {
min-width: 131px !important;
max-width: 131px !important;
}
angular-positionview .fm-cell[data-c="10"] {
min-width: 70px !important;
max-width: 70px !important;
}
angular-positionview .fm-cell[data-c="11"] {
min-width: 100px !important;
max-width: 100px !important;
}
angular-positionview .fm-cell[data-c="12"] {
min-width: 120px !important;
max-width: 120px !important;
}
angular-positionview .fm-cell[data-c="13"] {
min-width: 131px !important;
max-width: 131px !important;
}
⋅ October 14, 2025
Hello Kiran,
Thank you for reaching out to us.
The issue occurs due to the specifics of how the scroll works on the virtual grid in Flexmonster. Flexmonster does not render all cells to optimize performance. Due to this, when the updateData is called, the grid is rerendered, and attempts to keep the scroll position. The scroll position restoration requires JS calculations before rendering, so the styles are not considered in this process, resulting in unexpected flickering behavior.
We recommend setting column widths using the tableSizes object instead of CSS to resolve the issue. This would provide a component with the exact column widths used during rendering, making the scroll position reset on updateData more stable.
The column widths can be defined in the report by column indexes similarly to your current styles: https://jsfiddle.net/flexmonster/4wdzjgnz/
Please let us know if the suggested approach worked for you.
Best regards,
Maksym
⋅ October 21, 2025
Hello Kiran,
Hope you are doing well.
We are wondering if you tried changing the column widths with the tableSizes object, and if it helped to remove the flickering on data updates.
Looking forward to hearing your feedback.
Best regards,
Maksym
