amp-list doesn't reclaim space after expanding browser

[eavonius]

Hello,

When using amp-list, I have a CSS grid that shows two columns of content at a time using flexbox to "wrap" extra items.

When the device is smaller than 1032 px, I show one column at a time.

This works great both in the larger and smaller dimensions.

It also works great if your browser is full-screen initially, you infinitely scroll to the end of the list, and then resize the browser down.

However, after resizing the browser down (so the list is longer) and then resizing the browser back up - there's a bunch of extra space below the items now that there are two per column.

Is there a way to tell amp-list to resize itself when a media query fires?

Thank you for this great framework!!!

[thekp]

Hi, thanks for raising this issue. I am also having this issue with my attempt to use amp-list. My component will render with the correct height on the initial render but when the page is resized and the height is increased, it will also not reclaim the height increase.

I am using the layout='repsonsive' attribute. My implementation of amp-list can be seen here: https://github.com/bbc/simorgh/pull/6440/files#diff-8d1c24b698c68492c855f7257b908b52R32-R39

GIF of what is happening:

To be able to replicate my GIF locally.

git clone git@github.com:bbc/simorgh.git
cd simorgh
git checkout addAmpMostRead
npm install
npm run dev

visit this URL: http://localhost:7080/pidgin.amp (my amp list component lives at the bottom of the page).

I also noticed the issue in the example playground: https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fnews-publishing%2Fnews_article&format=websites&mode=iPhone+5%2FSE (To see issue, you will have to add a custom viewport size of less than 200 width, then resizing the viewport to a larger width, notice there will be extra white space at the bottom of the amp-list component).

[joshcoventry]

Hello @wassgha @caroqliu , can I check if there is a way yet to resolve the above issue that @thekp reported? Thank you.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[jaygray0919]

bump

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.