AMP list - how to remove empty space if we get no response from the API?

Question

We have AMP page where we get 3 lists from the server and we bind it on the client. Here is the fiddle for the same.

But since the output is dynamic and we are specifying height as 100, in the code here where 2nd list is returning empty json, we are seeing a lot of empty space which is not desirable.

The code that fetches empty list is:

<amp-list width="auto" height="100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
    <template type="amp-mustache" id="amp-template-id">
      <div><a href="{{url}}">{{title}}</a></div>
    </template>
</amp-list

How can we get rid of this fixed height AMP list and adjust the height based on the content received from the server?

I read something similar here but am unable to follow this. Could someone please share how to resolve this?

Answer 1

This is currently not possible with amp-list. You can use amp-access instead. The approach would be to return the JSON data in the amp-access authorization endpoint. Based on the data you can then dynamically render content on the page:

<section amp-access="items">
  <template amp-access-template type="amp-mustache">
    {{#items}}
    <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
  </template>
</section> 

Answer 2

You can add an auto-resize attribute to <amp-list> to dynamically change the height of your AMP page.

Follow this github thread for more details. Check the merged code from here.

Answer 3

I have the same problem as well, maybe this little sneaky trick could help someone outhere, simply just edit the div overflow style (height and display) , this will maintain it's height as you like, remember this div need text value (cannot be empty) just set its visibility hidden if you want. When there's no json value to show on the mustache template it will automatically adjust the blank space back to normal.

<style amp-custom>
        amp-list > div.amp-visible{
            display:block;
            height:75px;
        }
        #hideButton{
            visibility: hidden;
        }
</style>    
<amp-list layout="flex-item" src="/static/inline-examples/data/amp-list-data.json">
<div overflow id="hideButton">See more</div>
  <template type="amp-mustache">
    <div class="image-entry">
      <amp-img src="{{imageUrl}}"
        width="100"
        height="75"></amp-img>
      <span class="image-title">{{title}}</span>
    </div>
</template>
</amp-list>

Answer 4

<amp-list height="0" [height]="items.length * 100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
    <template type="amp-mustache" id="amp-template-id">
      <div><a href="{{url}}">{{title}}</a></div>
    </template>
</amp-list

This will keep your List at 0 height always until the Amp-List has items to display. Then it will add 100px of height for each item in your array. This is also shown if you search for Amp dynamic resizing