I have encountered a styling issue while using md-card in my application. The problem arises when I also include md-autocomplete in the home page, requiring me to modify the angular-material.css for proper display.
However, on the product page where I utilize md-card, the appearance is not as intended.
The culprit seems to be this CSS snippet:
body,
html {
height: 100%; ----> This disrupts the layout on the product page.
position: relative
}
Removing the height property fixes the product page but breaks other pages. Therefore, I need the height attribute to ensure correct display on all pages.
Below is the code for the md-card section:
<div class="container ">
<div style="margin-top: 5%" ng-repeat="review in reviews">
<md-card ng-repeat="review in reviews" md-theme="dark-grey" md-theme-watch>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Too Good</span>
<span class="md-subhead">username</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media">
<img ng-src="{{review.imgurl}}" alt="">
</div>
</md-card-title-media>
</md-card-title>
<md-card-content class="col-md-11">
<hm-read-more hm-text="{{text}}" hm-limit="100" hm-more-text="read more" hm-less-text="read less" hm-dots-class="dots" hm-link-class="links">
</hm-read-more>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button>Like</md-button>
<md-button>Dislike</md-button>
</md-card-actions>
</md-card>
</div>
</div>
Application URL : Home Page
Product Page URL : Product Page
If anyone can assist in resolving this CSS issue, it would be greatly appreciated.