Md-list in md-card is not adjusting

Question

The md-list in md-card is not adjusting to different screen sizes, in spite of the flex attribute. I believe it might be because of the ng-href inside of the md-list-item.

This is the setup that I have:

<md-content layout="row" layout-align="space-around stretch">
    <md-content layout="column" layout-align="start stretch" flex="90">
        <div></div>
    </md-content>

    <md-content flex>
        <md-card>
            <md-card-content>
                <md-list>
                    <md-list-item ng-href="" ng-repeat="">
                        <md-icon></md-icon>
                        <p></p>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </md-content>
</md-content>

Answer 1

You code snippet is right, let me give you some specification :

The md-list-item component automatically detects if the list item should be clickable.

If the md-list-item is clickable, we wrap all content inside of a and create an overlaying button, which will will execute the given actions (like ng-href, ng-click)

We create an overlaying button, instead of wrapping all content inside of the button, because otherwise some elements may not be clickable inside of the button.

When using a secondary item inside of your list item, the md-list-item component will automatically create a secondary container at the end of the md-list-item, which contains all secondary items.

The secondary item container is not static, because otherwise the overflow will not work properly on the list item.

Here is the example form official site of material angular :

 <md-list>
  <md-list-item class="md-2-line" ng-repeat="item in allTask">
    <md-checkbox ng-model="item.done"></md-checkbox>
    <div class="md-list-item-text">
      <h3>{{item.title}}</h3>
      <p>{{item.description}}</p>
    </div>
  </md-list-item>
</md-list>