Remaining Screen Space Directive

Overview

The remaining screen space directive calculates the amount of space remaining on the screen and sets the height of the associated element to the calculated value. Options exist to set a percentage of the remaining screen space as well as a bugger at the bottom of the screen.

This directive has been invaluable in creating our MPages for clients in that it allows dynamic height generation based on the resolution of end-user screen. A good example would be an MPage that displays two tables on the screen that has a requirement of both tables being visible at the same time (no scrolling off-screen). If you place both tables in containers that are 50% of the remaining space, both tables will always be visible.

Other examples include having a table resize to the remaining available height after displaying prompts at the top of the screen, or setting your workflow component height to be a maximum size in relation to the screen height.

Required Imports

To use the remaining screen space directive in your component, you must import the RemainingScreenSpaceDirective from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {RemainingScreenSpaceDirective} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
    imports: [RemainingScreenSpaceDirective],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

To use the remaining screen space directive, apply it to an HTML element container such as a DIV or SPAN element. The optional [percentage] parameter allows you the ability to set the percentage of the remaining screen space to use while the [shorten] parameter reduces the space by the number of pixels identified.

// Set the DIV to the remaining height of the screen
<div coRemainingScreenSpace [percentage]="50" [shorten]="12"></div>

// Set the DIV to the remaining height of the screen minus 24 pixels
<div coRemainingScreenSpace [shorten]="24"></div>

// Set the DIV to 50% of the remaining height of the screen minus 12 pixels
<div coRemainingScreenSpace [percentage]="50" [shorten]="12"></div>