Manage multiple screen sizes with matchMedia

Canvas includes the matchMedia library. This Angular library helps you to check which screen size is your page displaying and returns true if the current screen width matches what you need or false if not.

You can use this angular service to show or hide columns depending on the screen size:

  • xs: Extra small < 576px
  • sm: Small ≥ 576 px
  • md: Medium ≥ 768px
  • lg: large ≥ 992px
  • xl: Extra large ≥ 1200px

For example, let's say that we have the following table with LY, Year and the 12 months on columns:

On a small screen you do not want to show all months, you just want to show LY and Year.

In order to do that you will need to update the controller and then the HTML file.

Update the controller

In the controller you will need to enable the library by adding screenSize as one of the dependencies. You can do this by updating the top part of your script / controller as done below:

app.controller('DataEntryCtrl', ['$scope', '$rootScope', '$tm1UiTable', 'screenSize', function($scope, $rootScope, $tm1UiTable, screenSize) {

and then, to make it available for use on your HTML page too, create and assign a screenSize property into your $scope and assigned the 'screenSize' library into this variable:

$scope.screenSize = screenSize;

The controller will look like this:

Update the HTML file

In the html table you will need to use ng-if to show the months columns only if the size is medium (md) or large (lg). To do this, just add the ng-if="screenSize.is('md, lg')" inside the table header:

<th ng-if="screenSize.is('md, lg')" 
    ng-repeat="month in page.months">{{month}}</th>

and inside the table data:

<td ng-if="screenSize.is('md, lg')" 
    ng-repeat="month in page.months" class="text-right" >

More information about matchMedia can be found into its GitHub page.

An example of matchMedia can be found in the training session8 (Remove columns chapter):