Fix #458

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b58e834b44f9e82af19b27b755bf387a9fa8ed21..6172654732ca3eb5f2317e45d16056067ef7d425 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * Fix #581 nav container
 * Fix #512 nav grouped buttons
 * Fix #605 container example
+* Fix #458 select expanded
 
 ## 0.4.0
 

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index b22d3def970adf21087e77d2b3bd606acf2150dc..6597e5616e5859d85ce55407b130494616df41f0 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -646,6 +646,42 @@ doc-subtab: form
 {% highlight html %}
 {{addons_expanded_example}}
 {% endhighlight %}
+
+    <div class="content">
+      <p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
+    </div>
+{% capture addons_expanded_fullwidth_example %}
+<div class="field has-addons">
+  <p class="control is-expanded">
+    <span class="select is-fullwidth">
+      <select name="country">
+        <option value="Argentina">Argentina</option>
+        <option value="Bolivia">Bolivia</option>
+        <option value="Brazil">Brazil</option>
+        <option value="Chile">Chile</option>
+        <option value="Colombia">Colombia</option>
+        <option value="Ecuador">Ecuador</option>
+        <option value="Guyana">Guyana</option>
+        <option value="Paraguay">Paraguay</option>
+        <option value="Peru">Peru</option>
+        <option value="Suriname">Suriname</option>
+        <option value="Uruguay">Uruguay</option>
+        <option value="Venezuela">Venezuela</option>
+      </select>
+    </span>
+  </p>
+  <p class="control">
+    <button type="submit" class="button is-primary">Choose</button>
+  </p>
+</div>
+{% endcapture %}
+<div class="example">
+{{addons_expanded_fullwidth_example}}
+</div>
+{% highlight html %}
+{{addons_expanded_fullwidth_example}}
+{% endhighlight %}
+
     <div class="content">
       <p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
     </div>