volto-resize-helper

March 25, 2026 · View on GitHub

Volto add-on: Window resize helper

Usage

After you add this add-on to your project, the screen state is available as a global state in redux store.

!! Note that the values inside of screen object are related to the device / display sizes, not the browser sizes.

The layoutViewport object contains the sizes of the browser with scrollbars.

The page object contains the sizes of the browser without scrollbars. Note that the scrollbarWidth is available in page.scrollbarWidth.

The content object contains the width and offsets of content-area element (where blocks are rendered). This is useful for when you want to determine the widths of toolbar / sidebar and height of whatever is rendered above content-area.

The visualViewport object contains the sizes of the visual viewport. Note that the visual viewport is changing when zoomed in / out.

screen : {
   os: String, // This are all the posible values: ['mac', 'ios', 'windows', 'android', 'linux', 'mobile', 'unknown']
   hasTouchScreen: Boolean
   browserToolbarHeight : Number
   availHeight: Number,
   availWidth: Number,
   height: Number,
   width: Number,
   colorDepth: Number,
   orientation: {
      angle: Number,
      type: String, // https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type
   },
   pixelDepth: Number,
   layoutViewport = {
      height: Number,
      width: Number,
   },
   page: {
      height: Number,
      width: Number,
      scrollbarWidth: Number,
   },
   content = {
      width: Number,
      offsetTop: Number,
      offsetLeft: Number,
   },
   visualViewport: {
      height: Number,
      width: Number,
      scale: Number,
      offsetLeft: Number,
      offsetTop: Number,
      pageLeft: Number,
      pageTop: Number,
   }
}

## Getting started

### Try volto-resize-helper with Docker

      git clone https://github.com/eea/volto-resize-helper.git
      cd volto-resize-helper
      make
      make start

Go to http://localhost:3000

`make start` now defaults to Volto 18. To run the same setup against Volto 17, use:

      VOLTO_VERSION=17 make
      VOLTO_VERSION=17 make start

### Add volto-resize-helper to your Volto project

1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone

   ```Bash
   docker compose up backend

Start Volto frontend

If you already have a volto project, just update package.json:

"dependencies": {
    "@eeacms/volto-resize-helper": "*"
}

and volto.config.js:

const addons = ['@eeacms/volto-resize-helper'];

If not, create one with Cookieplone, as recommended by the official Plone documentation for Volto 18+:
```
uvx cookieplone project
cd project-title
```

Install or update dependencies, then start the project:
```
make install
```
For a Cookieplone project, start the backend and frontend in separate terminals:
```
make backend-start
make frontend-start
```
For a legacy Volto 17 project, install the package with yarn and restart the frontend as usual.
Go to http://localhost:3000
Happy editing!

volto-resize-helper

Usage

Release

How to contribute

Copyright and license

Funding