backbone.js infinite pagination display issue

Question

I'm using backbone infinite pagination. Take a look at this image. Before I click "more" everything is ok. Once I click "more" then new results are added fine, but the "more button" is not pushed down.

this is my template (I use twitter bootstrap), though I've also tried to put the "more" button directly after the "users-list" div which also did not work.

<div class="row"> 
    <div class="span2">
        <div id="users-list" style="height:50px"></div>        
    </div>
</div>


<div class="row">  
    <div class="span2">
        <ul class="pager">  
          <li>
            <a href="#" id="more">More</a>
          </li>
        </ul>
</div>
</div>

Here is how I add new results in the view code:

    //in initialize()
    this.list = $("#users-list", this.el)

    ...

    //in render()
    _.each(this.model.models, function (user) {            
        this.list.append(new User({model:user}).render().el);
    }, this);

Answer 1

It looks like the issue is because you have a height of 50px set to your user-list. I'm not sure why you have that in the first place, there might be a reason, but when you do add more items to it dynamically, the height either needs to grow dynamically or you can simply remove it.

 <div id="users-list" style="height:50px"></div>