Partial Rendered incorrectly in Firefox
I am trying to generate a hidden div with a rails partial inside it. My intention is to use that hidden div as target for fancybox to open the edit form in a popup. My partial code looks like:
<div style="display:none">
<div id="inline-edit-form-<%=feed_item.id%>" class="inline-edit-form">
<%= form_for (feed_item) do |f| %>
<%=render :partial => 'calendars/form', :locals => { :f => f }%>
<% end %>
</div>
</div>
Now, in Chrome, the layout is as intended and the partial is hidden initially. Fancybox manages to render this partial when its source link is clicked and things work fine. But in Firefox, the hidden DIV is not hidden by default and all controls are displayed. I checked HTML DOM structure on both Chrome and Firefox and there are huge differences. Markup in Chrome (correct):
<div style="display:none">
<div id="inline-edit-form-596" class="inline-edit-form">
<form accept-charset="UTF-8" action="/calendars/596" class="edit_calendar" d="edit_calendar_596" method="post"></form>
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="">
</div>
<div>
<label for="calendar_event">Event</label><br>
<input class="inline-edit-input" id="calendar_event" name="calendar[event]" size="30" type="text" value="Interesting event">
</div>
The above markup is correct and what is expected. The shocking markup in Firefox is:
<div style="display: none;">
<div class="inline-edit-form" id="inline-edit-form-598">
</div>
</div>
<div style="margin: 0pt; padding: 0pt; display: inline;"></div>
<div>
<label for="calendar_event">Event</label><br>
<input type="text" value="Another interesting important event" size="30"
name="calendar[event]" id="calendar_event" class="inline-edit-input">
</div>
This mark up is not only incorrect, its not even rendering the FORM tag at all. I checked and rechecked my CSS and DOM structure but Firefox simply chos开发者_开发问答es to screw the layout.
Any help?
Thanks for the hint. There was one validation error which fixed the error. The error was that I was including inside the table. After moving the hidden divs outside the table, the issue got resolved.
精彩评论