Hi,
I've had an issue with using the page templates and the scaling of my charts for viewing on multiple devices. I've created an example here to explain.
Using the following command we produce a pie chart:
<ma-pie-chart style="height: 300px; width: 600px" values='[ { "value": 30, "text": "hot", "color": "#ff9300" }, { "value": 70, "text": "cold", "color": "#942192" } ]' options="{depth3D:15,angle:30}"></ma-pie-chart>
Also, using the following command supplied by the example page templates, we can create a 4 card dashboard:
<div flex layout="column" layout-fill>
<div flex layout="column" layout-gt-sm="row">
<md-card flex>
<md-card-content>
Card 1
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
Card 2
</md-card-content>
</md-card>
</div>
<div flex layout="column" layout-gt-sm="row">
<md-card flex>
<md-card-content>
Card 3
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
Card 4
</md-card-content>
</md-card>
</div>
</div>
I have placed a pie chart in one of the cards:
<div flex layout="column" layout-fill>
<div flex layout="column" layout-gt-sm="row">
<md-card flex>
<md-card-content>
<ma-pie-chart style="height: 300px; width: 600px" values='[ { "value": 30, "text": "hot", "color": "#ff9300" }, { "value": 70, "text": "cold", "color": "#942192" } ]' options="{depth3D:15,angle:30}"></ma-pie-chart>
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
Card 2
</md-card-content>
</md-card>
</div>
<div flex layout="column" layout-gt-sm="row">
<md-card flex>
<md-card-content>
Card 3
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
Card 4
</md-card-content>
</md-card>
</div>
</div>
This produces the following output:
Now modifying the width of the chart to
style="height: 300px; width: 100%"
I get the following output:
Which works, and I am happy. However, when I modify the height of the chart to autoscale, i.e.
style="height: 100%; width: 100%"
The chart effectively has 0 height, and appears like this:
This is frustrating me as I do not want to fix the height of my charts inside this template - as they look incorrect on difference devices. I'm also confused because it appears to work for pictures, but not for charts and other objects. For instance:
<div flex layout="column" layout-fill>
<div flex layout="column" layout-gt-sm="row">
<md-card flex>
<md-card-content>
<img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
<img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
</md-card-content>
</md-card>
</div>
<div flex layout="column" layout-gt-sm="row">
<md-card flex>
<md-card-content>
<img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
<img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
</md-card-content>
</md-card>
</div>
</div>
Produces:
Which is exactly what I would like to have because as you vary the size of the browser window the picture will not exceed the size of the card.
Do you have any possible suggestions which will allow me to 'place' a chart in a card and vary with browser window without the chart having fixed dimensions and 'spilling' over the edge of the card?
Thank you in advance!
