Amphtml: amp-list: overflow show-more not working with load-more attribute

[sudeeshr]

amp-list: overflow show-more not working with load-more attribute.
https://amp.dev/documentation/components/amp-list/

Code?

<amp-list width="auto" height="100" src="<%= process.env.API_URL %>/api/123/comments?limit=5" single-item items="data" template="allcomments" binding="refresh" load-more="manual" load-more-bookmark="data.next_page_url" > <!-- <button overflow>Show all comments</button> --> <div overflow role="button" aria-label="Show more" class="list-overflow show-more"> Show more </div> </amp-list> <template type="amp-mustache" id="allcomments"> <!-- <div class="donor-heading">{{total}} comments</div> --> {{#data}} <div class="display-props"> <div class="flex-container-row"> {{#entity}} {{#avtar}} <amp-img width="204" height="264" layout="responsive" src="{{cdn_path}}" class="profile-img"></amp-img> {{/avtar}} {{^avtar}} <amp-img width="204" height="264" layout="responsive" src="<%= process.env.CDN %>/images/default-profile-picture.jpg" class="profile-img"></amp-img> {{/avtar}} <div class="name">{{full_name}}</div> {{/entity}} <!-- todo: date --> <!-- <amp-date-display timestamp-ms="{{updation_date}}" layout="fixed-height" height="20" template="dateTemplate"> <template type="amp-mustache" id="dateTemplate"> {{monthName}} {{day}}, {{year}} </template> </amp-date-display> --> </div> </div> <span class="comments">"{{text}}"</span> <div class="separator"></div> {{/data}} {{^data}} <p style="text-align:center">No comments yet</p> {{/data}} </template>

{ "error": false, "data": { "current_page": 1, "data": [ { "id": "16477e61-aa62-4ad6-80c2-0a0915fe955a", "user_id": 479079, "text": "ds fdsfdg sdf gfg fh fdh gdfh gfd", "creation_date": "2019-04-01 07:04:01", "entity": { "id": 479079, "full_name": "James Bond", "avtar": { "entity_id": 479079, "cdn_path": "https:\/\/s3-ap-southeast-1.amazonaws.com\/mybucket\/3\/media\/image\/5c9cb526d1d1b.jpeg" } } }, { "id": "1807cd16-e2d4-43dd-a890-119c94cf47c1", "user_id": 479079, "text": "zgvfdg fdsgdsfg dfsg dfsg dfsg fds", "creation_date": "2019-04-01 07:01:59", "entity": { "id": 479079, "full_name": "James Bond", "avtar": { "entity_id": 479079, "cdn_path": "https:\/\/s3-ap-southeast-1.amazonaws.com\/mybucket\/3\/media\/image\/5c9cb526d1d1b.jpeg" } } }], "from": 1, "last_page": 1, "next_page_url": null, "path": "http:\/\/localhost:8000\/api\/123\/comments", "per_page": 5, "prev_page_url": null, "to": 2, "total": 2 } }

What browsers are affected?

All browsers

Which AMP version is affected?

v0.js

[cathyxz]

Hi there! Thanks for getting in touch. Could I trouble you to be more specific about what behavior you are expecting and what behavior you are observing with a reproducible code example?

A few comments on the interaction of overflow with load-more:

When the load-more attribute is active, it overrides the overflow element. Specifically, it has a load-more-button element that serves the same purpose. When the list elements overflow the allocated space, clicking the load-more-button element should simultaneously reveal the hidden elements and send fetch request to fetch and load more items. So basically, if you're using load-more, you should be using the load-more-button element instead of the overflow element and there is no need to provide an overflow element. You can customize that per instructions here: https://amp.dev/documentation/components/amp-list/#load-more-button.

Let me know if that addresses your concern. If so, I'll update the documentation to make this more explicit. Otherwise happy to further troubleshoot a live sample.

[sudeeshr]

I am trying to show comments on a page. The comments API returns 10 comments in 1 page. When there are less than 10 comments the next_page url(load-more-bookmark) is null so the load-more button doesn't appear but the content is overflowing so in this case the show-more button must be displayed.

[chasefinch]

I'm also observing this problematic behavior with the load-more routine. It happens when loading items that specify the URL for the next batch using load-more-src (or load-more-bookmark with a custom field name.)

When the initial load contains more items than fit into the visible space, but not enough to create a next page, there's no Load More button to reveal the hidden elements.

It seems that the load-more-button element should appear just like the overflow element when amp-list can't resize and there are hidden items, even if there's no load-more-src field specified.