amp-list with dynamic height

Question

I'm using amp-list and I would like to have a dynamic height based on the results that I got. There is a way to do it? I couldn't get it done.

<amp-list src="request-url">
    <template type="amp-mustache" id="amp-template-id">
    ...
    </template>
</amp-list>

All the available layouts requires dimensions at the amp-list level or parent level. However I don't want to specify an height. My results can either have 1 or 12 items.

Answer 1

There is no dynamic layout in AMP (this is to avoid reflow while the page is loading, which is one of the big advantages of AMP). However, the amp-list will automatically take more space if required (and available).

You can do the following three things to support this:

1. Use a fixed-height layout with enough height to include the first element. This ensures that the list doesn't take up too much space in case there is only one element.
2. Specify an overflow button in case the list is collapsed.
3. Enable the amp-runtime to give the list more space by placing the list below the initial viewport or as far to the bottom as possible.

Here is what the official docs say about this:

If amp-list needs more space after loading it requests the AMP runtime to update its height using the normal AMP flow. If AMP Runtime cannot satisfy the request for new height, it will display overflow element when available. Notice however, the typical placement of amp-list elements at the bottom of the document almost always guarantees that AMP Runtime can resize it.

source: https://www.ampproject.org/docs/reference/components/amp-list