Vertically Shift Address Finder

From time to time, you may want to tweak the default style of Address Finder to better match your applications design system.

JavaScript Style Adjustments are the recommended means to make small changes.

A common issue is the alignment of the Address Finder dropdown, this may be a few pixels to high or low. In these instances, we recommend a positive or negative margin-top style attribute.

The listStyle property is an object that allows customizing the appearance of the address list. In this example, marginTop is set to "-1.4rem" to adjust the top margin of the list.

JavaScript

 
AddressFinder.setup({
    apiKey: "ak_test",
    listStyle: {
        marginTop: "-1.4rem"
    },
    outputFields: {
        line_1: "#line_1",
        line_2: "#line_2",
        line_3: "#line_3",
        post_town: "#post_town",
        postcode: "#postcode"
    }
});

HTML

<form style="max-width: 450px; padding: 10px;">
    <h1>Address Form</h1>
    <label for="line_1">Address First Line</label>
    <input type="text" id="line_1" />
    <label for="line_2">Address Second Line</label>
    <input type="text" id="line_2" />
    <label for="line_3">Address Third Line</label>
    <input type="text" id="line_3" />
    <label for="post_town">Town or City</label>
    <input type="text" id="post_town" />
    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" />
</form>

Live Demo

Loading...

;