Controlling the Design

The Autoaddress ​React Component is packaged with the styling included out of the box.

Below we will detail all the CSS classes used by the component and what their purpose is. You can easily customise the styling of the plugin to your needs by overriding our styles inside the corresponding  CSS files you are using our component on in your project.

HINT : If you add extra CSS rules to override styles for the component remember to import the CSS files after importing the Autoaddress component.

Out of the box design (as it would look on your page without any css customisation or event handling)

 

Sample change to styling

 
 .autoaddress-control{
    margin : 10px 0;
    width: 450px;
 }
 .autoaddress-control .autoaddress-button{
    background-color: #3CB371;
    border: 1px solid #2E8B57;
    font-size:16px;
    height: 40px;
 }
.autoaddress-control .autoaddress-text-box{
    background :  #f7f7f7 none repeat scroll 0% 0%;
    color: #000;
    height: 40px;
    font-size: 14px;
 }

Basic Markup Structure

Below you can see the basic out of the box HTML structure that the Autoaddress React Component generates when initialised on your React webpage. 

  <div class="autoaddress-control">
     <input class="autoaddress-text-box" type="text"></input>
     <button class="autoaddress-button">Search</button>
     <div class="autoaddress-autocomplete">
        <div class="autoaddress-suggestion"></div>
     </div>
  </div>

CSS Classes

Class Name Description HTML
.autoaddress-control Parent class for the Autoaddress plugin, all other Autoaddress CSS classes are nested underneath this class. <div>
.autoaddress-text-box Class for the Search Input Text Field. <input>
.autoaddress-button Class for the Search Button. <button>
.autoaddress-autocomplete Container class for the autocomplete suggestions. <div>
.autoaddress-suggestion Class for autocomplete individual item. <div>
.autoaddress-options-container Container class for options div which insists of the options info message and options list. <div>
.autoaddress-options-list Container class for the list of options. <div>
.autoaddress-options-item Class for displaying an option in the options list. <li>
.autoaddress-options-msg .error Class for the error message information panel. <div>
.autoaddress-options-msg .info Class for the information message information panel. <div>
.autoaddress-options-msg .success Class for the success message information panel. <div>
.autoaddress-options-tabs Class for clickable tabs on a result containing options for addresses / businesses. <ul>
.autoaddress-back-link Class for the Back Link <a>
.autoaddress-close-msg Class for the Close Icon on the notification panels. <a>
HINT : If you wish to add override our existing styles, you can do so by adding your own CSS rules based on the above classes. But note that our css classes are nested with .autoaddress-control to ensure our CSS does not interfere with your existing CSS, so for example if you wish to add a change to .autoaddress-button you would add a CSS rule as follows .autoaddress-control > .autoaddress-button.

To make sure you are overriding the correct CSS classes we highly recommend using your favourite ​web inspector tool, select the element you want to change and view the CSS rules currently applied to that element.