Menu icon Foundation
Dropdown classes not loading from Sass to CSS

I am using version 5.0.3.1 of the foundation-rails gem, and I cannot get it to add the .f-dropdown class to the CSS output.

Here are the Sass imports in my admin/application/index.css.scss:

//
// Settings
//

@import
  "admin/application/foundation_and_overrides",
  "admin/settings";

//
// Dependencies
//

// Gem: foundation-rails
@import
  "foundation/components/global",
  "foundation/components/grid",
  "foundation/components/type",
  "foundation/components/forms",
  "foundation/components/tables",
  "foundation/components/buttons",
  "foundation/components/split-buttons",
  "foundation/components/button-groups",
  "foundation/components/alert-boxes",
  "foundation/components/reveal",
  "foundation/components/top-bar",
  "foundation/components/breadcrumbs",
  "foundation/components/inline-lists",
  "foundation/components/pagination",
  "foundation/components/tabs",
  "foundation/components/accordion",
  "foundation/components/progress-bars",
  "foundation/components/panels",
  "foundation/components/thumbs",
  "foundation/components/labels",
  "foundation/components/tooltips",
  "foundation/components/side-nav",
  "foundation/components/dropdown";

In foundation_and_overrides.scss, I have changed every instance of $include-html-button-classes that I could find to true, but it still will not add the .f-dropdown class to the CSS that it outputs.

My workaround is to create my own admin/modules/dropdowns.css.scss file with these contents and then @import it from my index.css.scss:

.f-dropdown {
  @include dropdown-container;

  li { @include dropdown-style; }
}

Is this a problem with Foundation or the foundation-rails gem? Not sure, but our friends at ZURB may want to look into it...

dropdownrailsfoundation-railsSass

I am using version 5.0.3.1 of the foundation-rails gem, and I cannot get it to add the .f-dropdown class to the CSS output.

Here are the Sass imports in my admin/application/index.css.scss:

//
// Settings
//

@import
  "admin/application/foundation_and_overrides",
  "admin/settings";

//
// Dependencies
//

// Gem: foundation-rails
@import
  "foundation/components/global",
  "foundation/components/grid",
  "foundation/components/type",
  "foundation/components/forms",
  "foundation/components/tables",
  "foundation/components/buttons",
  "foundation/components/split-buttons",
  "foundation/components/button-groups",
  "foundation/components/alert-boxes",
  "foundation/components/reveal",
  "foundation/components/top-bar",
  "foundation/components/breadcrumbs",
  "foundation/components/inline-lists",
  "foundation/components/pagination",
  "foundation/components/tabs",
  "foundation/components/accordion",
  "foundation/components/progress-bars",
  "foundation/components/panels",
  "foundation/components/thumbs",
  "foundation/components/labels",
  "foundation/components/tooltips",
  "foundation/components/side-nav",
  "foundation/components/dropdown";

In foundation_and_overrides.scss, I have changed every instance of $include-html-button-classes that I could find to true, but it still will not add the .f-dropdown class to the CSS that it outputs.

My workaround is to create my own admin/modules/dropdowns.css.scss file with these contents and then @import it from my index.css.scss:

.f-dropdown {
  @include dropdown-container;

  li { @include dropdown-style; }
}

Is this a problem with Foundation or the foundation-rails gem? Not sure, but our friends at ZURB may want to look into it...

This post has been closed. No new replies can be added.

Chris Peters over 5 years ago

In foundation_and_overrides.scss, I had turned off $include-html-classes globally:

$include-html-classes: false;

This does not jive well with some of the newer components like Dropdowns and Off Canvas (as I just learned tonight).

I changed that setting to true, and things started working correctly. After doing that, I went through all $include-* settings that I had uncommented and made sure that they were set to appropriate values.

Hope this helps someone else who may fall into this trap.