This resolves an issue with the deployed 4.0 version that kept the drop down `.custom...

diff --git a/docs/components/custom-forms.html.erb b/docs/components/custom-forms.html.erb
index 90ea2609d47475247dd09219b882e8029407eb7e..6f855e2dbdc01f5295fbbc45d5bb87c41dbd96ba 100644 (file)
--- a/docs/components/custom-forms.html.erb
+++ b/docs/components/custom-forms.html.erb
@@ -124,7 +124,7 @@
 </form>', :html %>
 
         <form class="custom">
-          <label for="customDropdown2">Medium Example</label>
+          <label for="customDropdown2">Default Example</label>
           <select id="customDropdown2">
             <option DISABLED>This is a dropdown</option>
             <option>This is another option</option>
@@ -228,7 +228,7 @@
       </select>
     </div>
     <div class="small-4 columns">
-      <a href="#" class="button postfix expand">Button</a>
+      <a href="#" class="button postfix">Button</a>
     </div>
   </div>
 </form>', :html %>
@@ -273,7 +273,7 @@
               </select>
             </div>
             <div class="small-4 columns">
-              <a href="#" class="button postfix expand">Button</a>
+              <a href="#" class="button postfix">Button</a>
             </div>
           </div>
         </form>

diff --git a/scss/foundation/components/_custom-forms.scss b/scss/foundation/components/_custom-forms.scss
index 0a1b4aeda4d21ef0fca5b74c3e2dcdada2b54bff..0a82cd43c3579a336570eef0a8b361a915c28443 100644 (file)
--- a/scss/foundation/components/_custom-forms.scss
+++ b/scss/foundation/components/_custom-forms.scss
@@ -30,11 +30,14 @@ $custom-dropdown-font-size:             emCalc(14px) !default;
 $custom-dropdown-color-selected:        #eeeeee !default;
 $custom-dropdown-font-color-selected:   #000 !default;
 $custom-dropdown-shadow:                0 2px 2px 0px rgba(0,0,0,0.1) !default;
-$custom-dropdown-offset-top:            none !default;
+$custom-dropdown-offset-top:            auto !default;
 $custom-dropdown-list-padding:          emCalc(4px) !default;
 $custom-dropdown-left-padding:          emCalc(6px) !default;
 $custom-dropdown-right-padding:         emCalc(38px) !default;
 $custom-dropdown-list-item-min-height:  emCalc(24px) !default;
+$custom-dropdown-width-small:           134px !default;
+$custom-dropdown-width-medium:          254px !default;
+$custom-dropdown-width-large:           434px !default;
 
 // We decided not to make a mixin for the custom forms because
 // they rely on a very specific class naming structure.
@@ -171,14 +174,14 @@ form.custom {
       @include box-sizing(content-box);
     }
 
-    &.small { max-width: 134px !important; }
-    &.medium { max-width: 254px !important; }
-    &.large { max-width: 434px !important; }
+    &.small { max-width: $custom-dropdown-width-small; }
+    &.medium { max-width: $custom-dropdown-width-medium; }
+    &.large { max-width: $custom-dropdown-width-large; }
     &.expand { width: 100% !important; }
 
-    &.open.small ul { max-width: 134px !important; @include box-sizing(border-box); }
-    &.open.medium ul { max-width: 254px !important; @include box-sizing(border-box); }
-    &.open.large ul { max-width: 634px !important; @include box-sizing(border-box); }
+    &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
+    &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
+    &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
   }
 
   .custom.dropdown ul {