Skip to main content

Display modes

The stock runners support different display modes. These modes determine how the runner is displayed in the browser.

🖥️ Setting the display mode​

The available modes may vary by runner (see the documentation of each runner), but the following 2 are always available:

  • inline: The runner is shown inline with other content;
  • page: The runner uses the whole page (viewport).

So in the inline mode, the runner can be mixed with other content. If the runner is the only item on the page, the display mode should be set to page. The runner then covers the whole page of the browser.

import { run } from "@tripetto/runner-autoscroll";

run({
  definition: /* Supply your form definition here */,
  display: "page"
});
info

The default mode when the display property is omitted is inline. Unless, document.body is supplied to the element property of the runner. In that case, page is used as the default display mode.

Setting a height for the runner

If the inline display mode is used, you may supply a fixed height for the runner using the customStyle property. Otherwise, the height of the runner is automatically calculated based on the content of the runner. Most of the time, that's what you want/expect from the inline mode. But if you do want to specify a fixed height, you can do so. Example:

import { run } from "@tripetto/runner-autoscroll";

run({
  definition: /* Supply your form definition here */,
  display: "inline",
  customStyle: {
    height: "100px"
  }
});

📖 Reference​

Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following symbols were used: