[MdCardExpand] Card grows as dynamic content is added to md-card-expand-content

[atinybeardedman]

I have a card where the hidden expansion content is dynamic and will grow. As the content grows the margin offset of the hidden content doesn't update so the card grows.

See demo here:
https://codesandbox.io/s/py1m35w0kj

Currently it looks like the offset is only being calculated on mount. I'm new to Vue, but could this be changed to update as the slot changes should trigger that lifecycle hook and correct the problem?

[Samuell1]

Here is simple solution to update margin: https://codesandbox.io/s/7wopvk909q

[ericuldall]

I believe i'm facing a similar issue (perhaps the same) when generating multiple cards from API results.
Steps to reproduce:

1. Setup the following template

<template>
  <div class="card-expansion" v-if="results">
    <md-card v-for="result in results" :key="result.id">
      <md-card-media>
        <img  :src="result.img" alt="People">
      </md-card-media>

      <md-card-header>
        <div class="md-title">{{ result.title }}</div>
        <div class="md-subhead">{{ result.subtitle }}</div>
      </md-card-header>

      <md-card-expand>
        <md-card-actions md-alignment="space-between">
          <div>
            <md-button href="result.url">Click Here</md-button>
          </div>

          <md-card-expand-trigger>
            <md-button class="md-icon-button">
              <md-icon>keyboard_arrow_down</md-icon>
            </md-button>
          </md-card-expand-trigger>
        </md-card-actions>

        <md-card-expand-content>
          <md-card-content>
            {{result.description}}
          </md-card-content>
        </md-card-expand-content>
      </md-card-expand>
    </md-card>

    
  </div>
</template>

2. on the created() event make an api call that will return results data

data () { return { results: false }; },
created () {
 apiCall.then(results => {
    this.results = results;
  });
}

When using this pattern some of the cards render okay and others render with part of the action buttons cut off at the bottom. Any idea if this is the same issue?

Using:

"vue": "^2.6.6",
"vue-material": "^1.0.0-beta-10.2"

Another thing to add... when I click the arrow to expand the content then click it again to hide the content, the div height is fixed.