Problem Solved By The Feature
If the items' content is dynamically modified (by a user action) or the row width is affected (by a viewport resize), the shown content of one row can overwrite the content of the following row (when an item's content is increasing or a row's width is decreasing), or a space below the row can be added (when an item's content is decreasing or a row's width is increasing).
The typical case when it happens:
<rx-virtual-scroll-viewport [dynamic]="dynamicSize">
<div *rxVirtualFor="let item of items$; trackBy: 'id'">
<span>{{ (showTimestamps ? '' : (item.timestamp + separator)) + item.content }}</span>
</div>
</rx-virtual-scroll-viewport>
dynamicSize is a reference to the function:
dynamicSize = (item: Log) => {
const letterWidth = 7.26; // a monospaced font is used
const rowSize = 22;
const totalWidthRequiredBase = ((this.showTimestamps ? '' : (item.timestamp + this.separator)) + item.content).length * letterWidth;
const rows = Math.ceil(totalWidthRequiredBase / this.viewportWidth);
return Math.max(rows, 1) * rowSize;
};
where showTimestamps and viewportWidth are class variables through which the calculation can be affected from the user side.
Solution
Adding a new input to the <rx-virtual-scroll-viewport> component (or any equivalent control) that would invoke internal recalculation of the dynamicSize function in moments when a user changes the showTimestamps variable or when the viewportWidth value is changed by resizing the viewport width.
Additional Context
Actually, the dynamicSize function is invoked only when the source items$ array is being changed (some items are added or deleted).
Problem Solved By The Feature
If the items' content is dynamically modified (by a user action) or the row width is affected (by a viewport resize), the shown content of one row can overwrite the content of the following row (when an item's content is increasing or a row's width is decreasing), or a space below the row can be added (when an item's content is decreasing or a row's width is increasing).
The typical case when it happens:
dynamicSizeis a reference to the function:where
showTimestampsandviewportWidthare class variables through which the calculation can be affected from the user side.Solution
Adding a new input to the
<rx-virtual-scroll-viewport>component (or any equivalent control) that would invoke internal recalculation of thedynamicSizefunction in moments when a user changes theshowTimestampsvariable or when theviewportWidthvalue is changed by resizing the viewport width.Additional Context
Actually, the
dynamicSizefunction is invoked only when the sourceitems$array is being changed (some items are added or deleted).