fix(style): default input should be 100% wide

That's the only default styling we want to provide.

Author: vvo

docs/source/bootstrap.html.erb

@@ -0,0 +1,13 @@
+---
+layout: bootstrap
+---
+
+<h1>Example using bootstrap</h1>
+
+<input type="search" class="form-control" id="test" />
+
+<script>
+places({
+  container: document.querySelector('#test')
+});
+</script>

docs/source/layouts/nostyle.erb docs/source/layouts/bootstrap.erbdocs/source/layouts/nostyle.erb renamed to docs/source/layouts/bootstrap.erb

@@ -5,13 +5,20 @@
     <meta charset="utf-8">
     <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
 
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
+
     <!-- Always force latest IE rendering engine or request Chrome Frame -->
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <title>Algolia Places | No style test</title>
     <%= javascript_include_tag config[:places_lib_url] %>
     <style>
       body {
-        font-family: Sans
+        font-family: Sans;
+        padding: 3em;
       }
     </style>
   </head>

docs/source/nostyle.html.erb

@@ -12,6 +12,10 @@
 .algolia-places.algolia-places-styled {
   width: 100%;
 
+  .ap-input, .ap-hint {
+    width: 100%;
+  }
+
   .ap-input:hover ~ .ap-input-icon svg,
   .ap-input:focus ~ .ap-input-icon svg,
   .ap-input-icon:hover svg {