Skip to main content

Style forms

The visual appearance of the stock runners can be modified. For example, you can adjust the font face, text size, and colors. Each stock runner may contain different style settings. Please look at the styles reference of each stock runner to see all the possible settings.

🎨 Applying styles​

To apply styles to the runner, you need to specify a styles object. Supply it to the styles property of the run function as shown in the following example.

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

run({
  definition: /* Supply your form definition here */,
  styles: {
    background: {
      color: "blue",
    },
    font: {
      family: "Arial",
      size: 12,
    },
  },
});
tip

It is possible to manage the styles of the runner using the builder. See this guide to learn how to implement that.

📂 Dynamic loading styles​

Since the style settings are stored as JavaScript objects (JSON strings), you can load them dynamically during runtime. To make it even easier, the styles property also accepts a Promise. You can use that to implement asynchronous loading of externally stored styles.

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

run({
  definition: /* Supply your form definition here */,
  styles: new Promise((resolve) => {
    // This example uses fetch to retrieve a JSON string with styles
    fetch("/styles.json").then((response) => {
      response.json().then((styles) => resolve(styles));
    });
  }),
});

👩‍💻 Custom CSS​

It is possible to apply custom CSS and styles to the HTML element that hosts the runner and to the HTML elements of the blocks inside the runner.

Setting a custom CSS class​

To specify a custom CSS class for the runner HTML element, use the className property.

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

run({
  definition: /* Supply your form definition here */,
  className: "your-custom-class-name"
});

Adding custom styles to the runner element​

To specify custom styles for the runner HTML element, use the customStyle property. You can use it, for example, to set a fixed height for the runner (which can be useful if you set the display mode to inline).

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

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

Adding custom styles to blocks​

There is also a property to add custom CSS styles to the blocks (input fields) of the runner. The custom CSS is supplied as a string to the customCSS property of the runner. Multiple CSS rules can be separated with a new line and nesting within CSS rules is supported. Each block is referenced by its block identifier (for the stock blocks, this identifier is always prefixed with @tripetto/block- followed by the lowercase name of the block).

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

run({
  definition: /* Supply your form definition here */,
  customCSS: `
        [data-block="@tripetto/block-text"] { background-color: blue; }
        [data-block="@tripetto/block-checkbox"] {
            input {
                background-color: red;
            }
        }
    `,
});

Run Try on CodeSandbox

tip

Have a look here to see which blocks are supported by the runner.

📖 Reference​

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