I am using Prototype Ajax Updater (via Rails link_to_remote) to insert some HTML returned from the server, at the bottom of a div. The correct HTML is inserted at the right place, however the new HTML at the bottom of the div displays over the top of the existing page footer.
If the content had originally been a part of the page then the footer would have been rendered lower, after that content. However when the extra content is inserted the footer stays where it is and the new content is displayed over the top of the footer.
Update: Below is the view code. The page itself is here: http://likily-stage.heroku.com/newest_members
The controller is very basic as it just calls the model asking for the next batch of records:
<h1>Newest Members</h1>
<div id="member_list">
<% @people.each do | person | %>
<div class="item connection">
<%= insert_profile_pic(person) %>
<d开发者_StackOverflowiv class="info">
<h2><%= link_to h(person.full_name), person %></h2>
<p class="author">Joined in <%= person.created_at.strftime("%B %Y") %></p>
<ul>
<li><span><%= person.reviews.count.to_s %></span> recommendations</li>
<li><span><%= person.lists.count.to_s %></span> lists</li>
<li><span><%= person.friends.count.to_s -%></span> connections</li>
</ul>
</div>
</div>
<% end %>
<div id="button_div">
<% if @people.last.id > 1 %>
<% offset_param = "'offset=" + @next_offset.to_s + "'" %>
<p>
<%= button_to_remote "Show More..." , {:url => {:action => 'more_members'},
:update => 'member_list', :position => :bottom, :with => offset_param,
:before => "removeElement('member_list','button_div'); Element.show('spinner_div')",
:after => "Element.hide('spinner_div')"} ,
:id => "more_people_button", :class => "button green wide_button" %>
</p>
<% end %>
</div>
</div>
You have a set height of 860px on the #member_list
and the #content
divs. So when you add content, the divs don't grow to fit (which would push the footer down), and just overflow instead
Remove the height from #content and #member_list and that should solve the problem.
精彩评论