Last post Dec 01, 2017 02:48 AM by Cathy Zou
Nov 30, 2017 12:29 AM|telcoengr|LINK
I have placed 3 Charts in 3 Columns of the Table.
Unfortunately Charts width and height are not changed according to the browser window size.
I tried viewing them in different monitors (displays) and every monitor display them incorrectly. Sometimes they even overlap with each other. To fix this issue i tried to use the CSS Style of the table. My first step was to fix the table column widths
(Table-layout: fixed). This made the columns of the table equal size. When i tried to change the chart sizes with !Important then the chart image is either stretched or shrink. This makes the chart ugly and also it disables the tooltip too.
Can someone please help how to dynamically change the charts width as per parent height & width?
var width = window.innerWidth;
var height = window.innerHeight;
alert("Width is:" + width + ", Height is:" + height);
Nov 30, 2017 04:15 AM|oned_gk|LINK
Afaik. you can use bootstrap
place the cards into 3 bootstrap columns
Nov 30, 2017 10:59 AM|telcoengr|LINK
I tried even bootstrap but issue is that my chart doesn't change its size automatically. if i do styling of any type then my chart will either stretch or shrink. This is normal behavior as chart is an image of asp.net.
Please see my below code of 3 Grids
border:1px solid black;
<div class="container containercss">
<div class="col-md-4 img-responsive">
<asp:Chart ID="Chart1" runat="server">
<asp:Chart ID="Chart2" runat="server">
<asp:Chart ID="Chart3" runat="server">
Nov 30, 2017 11:18 PM|oned_gk|LINK
Try set chart cssclass to img-responsive, not the div
<asp:Chart ID="Chart1" runat="server" CssClass="img-responsive">
Nov 30, 2017 11:49 PM|telcoengr|LINK
But i will also try bootstrap option again. I used img-responsive in div but i will also try to use in Chart CSS as you suggested. Do you know how can i remove the left & right margins of bootstrap?
Dec 01, 2017 02:48 AM|Cathy Zou|LINK
You can probably remove the margins if you do this
CSS Selector Reference: