Tuesday, 13 August 2013

Dropdown select list won't display items with custom forms of Zurb Foundation 4 and Rails 4

Dropdown select list won't display items with custom forms of Zurb
Foundation 4 and Rails 4

I've been having this annoying problem in which I click over the select of
my custom form, styled with Zurb Foundation 4 in my Rails application, and
the list won't show its elements.
I thought at a start that was a problem with simple form, but I changed
the f.association for f.collection_select, my code looks like this:
<h2><%= I18n.t(".sign_up") %></h2>
<%= simple_form_for(resource, :html => {:class => "custom"}, :as =>
resource_name, :url => registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<%= devise_error_messages! %>
<%= f.input :rut %>
<%= f.input :name %>
<%= f.input :email %>
<div>
<%= f.label :supplier_type_id %>
<%= f.collection_select :supplier_type_id, SupplierType.all, :id,
:name %>
</div>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.error :base %>
<%= f.submit I18n.t(".sign_up"), :class => "button" %>
<% end %>
<%= render "devise/shared/links" %>
The most strange thing is that sometimes I'm able to see the items when
refreshing the page, but sometimes I don't, it is sort of a random
problem. I've also noticed this when using hints for forms (i.e: If I have
two hints in the same form, in different inputs, only one would show, but
the same one message displays in both inputs when each message should show
in their respective input. When reloading the page sometimes it shows one
hint, and sometimes the other)
The styling looks good, so I think that it might be a foundation
javascript problem, but chrome console doesn't show any errors so its hard
to track.
Another thing I've noticed is that when I load the page the styling does a
kind of "blinking" when using custom forms. This blinking it looks likes
foundation takes a while to load the styling, I've also noticed this on
their own custom form documentation site. This may indicate that is a form
styled with javascript events or something similar, so this might mean
that javascript is working well.
I'm very lost, some help would become very handy. Thanks!

No comments:

Post a Comment