Skip to main content

Changing apperance of Form Renderer

We offer two approaches for modifying the form renderer's appearance. The first involves choosing between provided themes, while the second entails direct manipulation of the CSS properties. Both options provide flexibility to adapt the renderer's visuals to your preferences.

Themes

Form renderer comes with two predefined themes:

  • default: this theme is used by default and is recommended to use,
  • white: recommended to use in applications with white background

You can change appearance with theme by setting theme attribute in Form Context.

Customize Form Renderer styles

We understand that not all applications using the form renderer will fit our default styles so, we've made customization easy for developers. We've used CSS variables for most style values, letting you easily change them from outside the app. You'll find a few examples in styles-theme.css, but there are many more. Check out the full list of available values to override. If that still does not suite your needs, you can override it with your own style definitions.

Include your custom styles​

To include your custom style overrides, you simply include your .css files alongside the ones we provide. Form Renderer already comes with a file styles-theme.css where you can find some example to start overriding styles, but don't hesitate to add your own. The following is the example how to include styles-theme.css next to the default renderer styles.

<head>
  <script src="/your-path-to-file/form-renderer.js"></script>
  <link rel="stylesheet" type="text/css" href="/your-path-to-file/styles.css" media="screen"/>
  <link rel="stylesheet" type="text/css" href="/your-path-to-file/styles-theme.css" media="screen"/>
  <!-- ... -->
</head>

Example: Change the default font size of the forms with CSS variable​

The default font-size of all forms is 16px. To change it simply adjust the --b-ehr-form-font-size variable like shown in the next code snippet:

.ehr-form,
.ehr-form--theme,
.ehr-form--theme.default {
    --b-ehr-form-font-size: 18px;
}

Advanced customizations​

If the attribute you would like to customize is not parameterized you can still override it by writing global css selector with your desired style. The following code illustrates how to remove border-radius from an element with ehr path 'path/to/element'.

.ehr-form div[data-ehr-path="path/to/element"] mrd-field-label > div {
  border-radius: 0;
}