Angular Transform Scale - Remove Whitespace

Question

I am working on project where I need to scale down multiple large tables dynamically. I am achieving this by using transform: scale. Here is a simple version of what I am trying to achieve in stackblitz.

StackBlitz - Scaling Demo

The issue is when I scale down there is white space at the bottom. I have text and additional tables after this. How do remove this white space? I know this has been asked before but I am struggling to find a working solution especially for angular.

HTML

<h1>Transform</h1>
<button (click)="setScale1(1)">Original</button>
<button (click)="setScale1(0.5)">Scale 50%</button>
<button (click)="setScale1(0.25)">Scale 25%</button>

    <div style="transform-origin:0 0;" [style.transform]="'scale('+scale1+')'">
      <table style="width:130%;background-color:#D3D3D3;">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th> 
          <th>Age</th>
          <th>Sex</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td> 
          <td>50</td>
          <td>F</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td> 
          <td>94</td>
          <td>F</td>
        </tr>
        <tr>
          <td>Toby</td>
          <td>Smith</td> 
          <td>50</td>
          <td>M</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>Jackson</td> 
          <td>66</td>
          <td>M</td>
        </tr>
      </table>
    </div>
    <div>I would like this text to be directly after the blue container like when at 100% scale</div>
    <br>
    <button (click)="setScale2(1)">Original</button>
    <button (click)="setScale2(0.5)">Scale 50%</button>
    <button (click)="setScale2(0.25)">Scale 25%</button>
    <div style="transform-origin:0 0;" [style.transform]="'scale('+scale2+')'">
      <table style="width:130%;background-color:#D3D3D3;">
        <tr>
          <th>Company</th>
          <th>Type</th> 
          <th># Of Employees</th>
        </tr>
        <tr>
          <td>ABC Company</td>
          <td>Customer</td> 
          <td>50</td>
        </tr>
        <tr>
          <td>Other Company</td>
          <td>Customer</td> 
          <td>4</td>
        </tr>
        <tr>
          <td>Delta Force</td>
          <td>Supplier</td> 
          <td>100</td>
        </tr>
        <tr>
          <td>Alpha Rig</td>
          <td>Supplier</td> 
          <td>33</td>
        </tr>
      </table>
    </div>
    <div>I would like this text to be directly after the blue container like when at 100% scale</div>

JAVASCRIPT

import {Component} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  scale1: string = '1';
  scale2: string = '1';


  setScale1(value: string): void {
    this.scale1 = value;
  }
  setScale2(value: string): void {
    this.scale2 = value;
  }
}

Answer 1

Using the Tallboy's suggested article here is the full solution for anyone interested. The suggested solution is to:

Updated stackblitz Working Solution

1. Wrap the table in a container and dynamically adjust the container's height when the scale is changed.

2. I get the height by assigning an id to the table

3. Get the height through document.getElementById

4. Change the height by multiple the height of the container (clientHeight) by the scale factor

HTML

Transform

Original Scale 25% Scale 50% Scale 150% Firstname Lastname Age Sex Jill Smith 50 F Eve Jackson 94 F Toby Smith 50 M Tom Jackson 66 M I would like this text to be directly after the table like when at 100% scale
Original Scale 25% Scale 50% Company Type # Of Employees ABC Company Customer 50 Other Company Customer 4 Delta Force Supplier 100 Alpha Rig Supplier 33 I would like this text to be directly after the table like when at 100% scale

Javascript

import {Component} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  scale1: string = '1';
  scale2: string = '1';

  height1: number;
  height2: number;


  setScale1(value: string): void {
    this.scale1 = value;
    this.setHeight('table1');   

  }
  setScale2(value: string): void {
    this.scale2 = value;
    this.setHeight('table2');   
  }
  setHeight(id: string): void {
      if (id === 'table1') {
        this.height1 = document.getElementById(id).clientHeight*parseFloat(this.scale1);
      }
      if (id === 'table2') {
        this.height2 = document.getElementById(id).clientHeight*parseFloat(this.scale2);
      }
  }
}

Answer 2

You can use zoom: 0.3 instead of scale: 0.3 however that will affect browsers differently, and won't work in Firefox.

Another workaround is to emulate zoom with transform (demo). Explained here