# Action Event: Resizable dashboards

This action event causes dashboards to reorder their contents more flexibly when run on different sized screens. Dashboard scaling can be thought of a one-size-fits-all solution to creating dashboards which support multiple screen sizes, such as mobile, tablet, and PC. All dashboard elements will resize except for embedded reports.

### Example

The same dashboard viewed on a tablet-size screen (left) or a smartphone-size screen (right):

Note: In this example, the client-side javascript is in separate file to improve readability.

Global Event Type: OnDashboardResize

This event occurs whenever an active dashboard changes size.

References:

- WebReportsApi.dll

Namespaces:

- WebReports.Api;
- System.IO

### A version of this Action Event for v2017.2+ is coming soon!

### Code for versions prior to 2017.2:

    string actionString = File.ReadAllText(@"{filepath}\actionString.js");
    sessionInfo.JavascriptAction.SetJsCode(actionString);
    return sessionInfo.JavascriptAction;

#### actionString.js

    var dashboardItemsList = clientInfo.dashboard.dashboardItemsList;

    if (clientInfo.dashboard.container.clientWidth < 700)
    {
      var currentBottom = 0;
      for (var i = 0; i < dashboardItemsList.length; i++)
      {
        var currentItem = dashboardItemsList[i];
        var canvasItem = currentItem.canvasItem;
        var dashboardElement = currentItem.Element;
        var designHeight = currentItem.DesignHeight;
        var designWidth = currentItem.DesignWidth;
        var scalingFactor = 1;
        var newHeight = designHeight;
        var newWidth = designWidth;

        if (designWidth > clientInfo.dashboard.container.clientWidth)
        {
          var ratio = designHeight / designWidth;
          newWidth = Math.floor(clientInfo.dashboard.container.clientWidth - 5);

          if (currentItem.Type != 'Report') newHeight = Math.floor(newWidth * ratio);
            scalingFactor = newWidth / designWidth;
        }
        canvasItem.SetBounds({left:0, top: currentBottom, width: newWidth, height: newHeight}, true);

        if (currentItem.Type == 'Text')
        {
          if (scalingFactor != 1)
          {
            dashboardElement.style.transform = 'scale(' + scalingFactor + ')';
            dashboardElement.style.transformOrigin = 'top';
          }
          else
          {
            dashboardElement.style.transform = '';
            dashboardElement.style.transformOrigin = '';
          }
        }
        currentBottom += newHeight + 5;
      }
    }
    else
    {
      for (var i = 0; i < dashboardItemsList.length; i++)
      {
        var currentItem = dashboardItemsList[i];
        var canvasItem = currentItem.canvasItem;
        var dashboardElement = currentItem.Element;
        var X = currentItem.DesignX;
        var Y = currentItem.DesignY;
        var Width = currentItem.DesignWidth;
        var Height = currentItem.DesignHeight;
        canvasItem.SetBounds({left:X, top: Y, width: Width, height: Height}, true);

        if (currentItem.Type == 'Text')
        {
          dashboardElement.style.transform = '';
          dashboardElement.style.transformOrigin = '';
        }
      }
    }