While developing a dashboard, I have come across an issue where I need to show the exact same size content of the widget in height and width throughout all screen resolution, for example:
if I have developed in 1536 * 722 and I am opening dashboard in 1366 * 728, it should so the same size by scaling the content or if I am opening at bigger resolution screen then also it should show the exact same size
currently, I am using the below formula and calculating the scale and applying it to div but it is not accurate it seems I am missing something as some time height or width of scale is not perfect it goes outside my container.
const currentWidth: number = this.widget.widgetSizing.bodyWidth; // saving width while created on particular screen resolution const currentHeight: number = this.widget.widgetSizing.bodyHeight; // saving height while created on particular screen resolution const availableWidth: number = this.el.nativeElement.offsetWidth; const availableHeight: number = this.el.nativeElement.offsetHeight; const scale = Math.min(availableWidth / currentWidth, availableHeight / currentHeight); this.el.nativeElement.style.width = currentWidth + 'px'; this.el.nativeElement.style.transform = 'scale(' + scale + ')'; this.el.nativeElement.style.transformOrigin = '0 0'; this.el.nativeElement.style.boxSizing = 'border-box'; this.el.nativeElement.style.display = 'block';
While developed in 1536 * 722 screen resolution
When viewed at 1920 * 902, Table height goes outside container