amp-mustache template contents not rendering when amp-list uses fixed-height layout and in a table with amp4email

Question

I'm having issues getting my button width to automatically size to the contents of its children tags when using amp-list and amp-mustache to load the contents inside of a html table. The use case is I have three cells in a row, and I want the last two cells to take up the space of its dynamically loaded content while the first cell will take up the remaining space.

The button contents are dynamically loaded via amp-list and amp-mustache template. I'm trying to have the amp-list use fixed-height layout to get the width to auto size to the loaded text. However, once I set fixed-height, I see that my contents wrapped within the cell just get auto sized to 0 or a very small number.

Do we know what could be going on here? I did see in common pitfalls in amp4email amp-mustache mention tables having strange behavior, but unsure if this is an instance of this and if there's a way around it.

Here's an example of my code.

  <table>
    <tr>
      <td>dummy text next to button</td>
      <td>
        <form class="AmpEmailFormButton-form" method="post" action-xhr="postEndpointThatPerformsAnAction.com">
          <template type="amp-mustache" id="myTemplate">
            <button class="{{#hearted}} clicked {{/hearted}}{{^hearted}} unclicked {{/hearted}}" id="bigButton">
              <div class="bigButton-=Icon"></div>
              <p class="bigButton-Text" data-amp-bind-text="clickState == null ? "{{hearted.text}}" : "{{unhearted.text}}">{{hearted.text}}</p>
            </button>
          </template>
          <amp-list layout="fixed-height" height="32" items="." single-item="true" binding="always" src="endPointThatReturns/someJsonResponse.json" template="myTemplate">
          </amp-list><input name="dummy" hidden />
        </form>
      </td>
    </tr>

  </table>

When I use code like this in the amp email playground and I do the inspector, I notice the contents with the amp-mustache template get sized to 0.

I've tried all the workarounds in the amp mustache pitfalls doc section and none of them fix my issue. I tried moving the element outside of the table and that seems to work. However, not an option since other parts of our email is already within html table layout. We've been able to get the contents to render when I just set a width to be some absolute value and do not use fixed-height. However, this limits our CSS options here since we want the button to be able to more dynamically resize and I want to be able better horizontally align things. We tried not using fixed-height and instead using other css attributes to get the dynamic width to work but couldn't find anything ideal since the inner content had a absolute width value.

Answer 1

Using [height] in amp-list for dynamic height. You need to calculate height from Server side