Skip to main content

Disable style injection and load the CSS externally

Address Finder applies its default styling by injecting an inline <style> tag into the document head. A strict Content Security Policy (one whose style-src omits 'unsafe-inline') blocks that tag and the widget renders unstyled.

The same styles ship as static files in the npm package (css/address-finder.css and css/address-finder.min.css), also served by jsDelivr. Disable injection with injectStyle: false and load the stylesheet like any other.

Add a <link> tag, pinning at least the major version to match your installed widget:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder@5/css/address-finder.min.css"
/>

Then disable injection:

AddressFinder.setup({
  apiKey: "ak_test",
  injectStyle: false,
  outputFields: {
    line_1: "#line_1",
    line_2: "#line_2",
    post_town: "#post_town",
    postcode: "#postcode",
  },
});

Your CSP needs to allow the stylesheet host, e.g. style-src 'self' https://cdn.jsdelivr.net.

Point injectStyle at a URL​

injectStyle also accepts a stylesheet URL. The widget then appends a <link rel="stylesheet"> element, not an inline <style> tag, so this works under the same CSP as a hand-written link:

AddressFinder.setup({
  apiKey: "ak_test",
  injectStyle:
    "https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder@5/css/address-finder.min.css",
});

Bundle the CSS yourself​

If you install via npm and use a bundler, import the stylesheet into your build and set injectStyle: false:

import "@ideal-postcodes/address-finder/css/address-finder.min.css";

The unminified @ideal-postcodes/address-finder/css/address-finder.css is also published if you want to compose or override rules in your own pipeline. React users should import from @ideal-postcodes/react instead - see React CSS.

Live Demo​

Loading...