Menu icon Foundation

Developer

Aero engineer turned OO, agile software guy, craft beer, climbing, autocross & track days

My Posts

No Content

My Comments

jonkern@comcast.net commented on Alejandro's post 8 months

Not sure if this helps, but in my Rails app (with haml), I needed multiple toggles on the same page.
So I invoke the 'help_callout' partial with an optional id as follows:
%div
%label
= (t 'banned_countries.label')
%span{ title: (t 'banned_countries.tooltip'), data: {tooltip: true}}
= fa_icon 'fw question-circle'
= render layout: 'help_callout', locals: {:id => 'banned'} do
= markdown(t 'banned_countries.info')
= f.text_field :banned_country_list
...

%label
%span= f.check_box :multilingual, class: 'js-checkbox_toggle'
= (t '.multilingual_support')
- title = (t '.multilingual_support_tooltip')
%span{ title: title, data: {tooltip: true}}
= fa_icon 'fw question-circle'
#js-org_multilingual_is_checked
%div
= render layout: 'help_callout', locals: {id: 'languages'} do
= markdown(t 'iq.admin.orgs.extra_form_fields.supported_languages_info')

 
And the partial uses the id as shown below:
-# The id is used if you need to have multiple help callouts on the same page
- toggle_id = local_assigns.fetch :id, 'help_text_1'
.callout.secondary
.row.align-middle.align-justify
.shrink.columns
%a{ data: { toggle: toggle_id } }= (t '.show_help')
.hide{ data: { toggler: '.hide' }, id: toggle_id }
=yield

jonkern@comcast.net commented on burak's post over 4 years

I had trouble getting the drop down to show up... But similar to Mantis above, It seems that the following load order worked (in my Rails app). That is, foundation had to be loaded below the jquery requires:

//= require jquery
//= require jquery_ujs
//= require jquery-1.10.1
//= require jquery.cookie
//= require jquery.joyride-2.1
//= require foundation
//= require turbolinks
//= require_tree .

jonkern@comcast.net commented on Jacob Stenum Czepluch's post over 4 years

I think you need a bit more in your nav div code (if you are on Foundation 5) to follow their recommended practices...

%nav.top-bar{"data-options" => "is_hover: false", "data-topbar" => ""}
  %ul.title-area
    %li.name
      %h1= "IQX"

  %section.top-bar-section
    %ul.right
      %li.has-dropdown
        %a{href: "#"} Right Button with Dropdown
        %ul.dropdown
          %li
            %a{href: "#"} First link in dropdown
        = render 'layouts/navigation_links'
    %ul.left
      %li= link_to 'Dashboard', root_path
      %li.divider

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Alejandro's post 8 months

Not sure if this helps, but in my Rails app (with haml), I needed multiple toggles on the same page.
So I invoke the 'help_callout' partial with an optional id as follows:
%div
%label
= (t 'banned_countries.label')
%span{ title: (t 'banned_countries.tooltip'), data: {tooltip: true}}
= fa_icon 'fw question-circle'
= render layout: 'help_callout', locals: {:id => 'banned'} do
= markdown(t 'banned_countries.info')
= f.text_field :banned_country_list
...

%label
%span= f.check_box :multilingual, class: 'js-checkbox_toggle'
= (t '.multilingual_support')
- title = (t '.multilingual_support_tooltip')
%span{ title: title, data: {tooltip: true}}
= fa_icon 'fw question-circle'
#js-org_multilingual_is_checked
%div
= render layout: 'help_callout', locals: {id: 'languages'} do
= markdown(t 'iq.admin.orgs.extra_form_fields.supported_languages_info')

 
And the partial uses the id as shown below:
-# The id is used if you need to have multiple help callouts on the same page
- toggle_id = local_assigns.fetch :id, 'help_text_1'
.callout.secondary
.row.align-middle.align-justify
.shrink.columns
%a{ data: { toggle: toggle_id } }= (t '.show_help')
.hide{ data: { toggler: '.hide' }, id: toggle_id }
=yield

You commented on burak's post over 4 years

I had trouble getting the drop down to show up... But similar to Mantis above, It seems that the following load order worked (in my Rails app). That is, foundation had to be loaded below the jquery requires:

//= require jquery
//= require jquery_ujs
//= require jquery-1.10.1
//= require jquery.cookie
//= require jquery.joyride-2.1
//= require foundation
//= require turbolinks
//= require_tree .

You commented on Jacob Stenum Czepluch's post over 4 years

I think you need a bit more in your nav div code (if you are on Foundation 5) to follow their recommended practices...

%nav.top-bar{"data-options" => "is_hover: false", "data-topbar" => ""}
  %ul.title-area
    %li.name
      %h1= "IQX"

  %section.top-bar-section
    %ul.right
      %li.has-dropdown
        %a{href: "#"} Right Button with Dropdown
        %ul.dropdown
          %li
            %a{href: "#"} First link in dropdown
        = render 'layouts/navigation_links'
    %ul.left
      %li= link_to 'Dashboard', root_path
      %li.divider

Posts Followed

Following

  • No Content

Followers

  • No Content