Page Charts are changing position if i zoom my page

HTML & CSS
1

I am new to HTML . Created page using online tutorials . Need help to fix

Code :slight_smile:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<style>
			#colorstrip{
				width: 100%; 
				height: 30px;
				background-color: #2874a6;
			}
			#colorstrip2{
				width: 100%; 
				height: 5px;
				//background-color: #2874a6;
			}
			.header{
				width:100%;
				height:5px;
				//background-color:#33b5ff;
			}
			body{
				margin:0px;
				padding:0px;
				 position: device-fixed;
				
			}
			.logo{
				float:right;
				display: inline-block;
				padding-right:200px;
				color:#21618c;
			}
			table {
  				width:100%;
				height: 50px;
			}
			th, td {
  				text-align: left;
			}
			table#t01 {
				width: 100%;    
				background-color: #f1f1c1;
				border: 1px solid black;
				border-collapse: collapse;
			}
			table#t01 th {
  				background-color: #2874a6;
				border-collapse: collapse;
				border: 1px solid black;
				padding: 15px;
				text-align:center;
			}
			table#t01 td {
  				background-color: #E5E8E8;
				border-collapse: collapse;
				border: 1px solid black;
				text-align: center;
				padding: 15px;
				word-wrap:break-word;
			}
			table#t02 {
				width: 100%;
				border-collapse: collapse;
				margin-bottom : 10px
			}
			table#t02 th {
				border-collapse: collapse;
				padding: 10px;
				text-align:center;	
			}
		</style>
	</head>
	<body style="margin-right:150px;margin-left:150px;">
		<div id="colorstrip" ></div>
		<div id="colorstrip2" ></div>
		<div class="header">
			<h1 class="logo">Health Check - Result</h1>
			<form style="float:left;display:inline-block;">
			<IMG SRC="Logo.png" ALT="logo" WIDTH=150 HEIGHT=60>
			</form>
		</div>
		<table bgcolor="#85C1E9">
  		<tr>
    			<th></th>
    			<th></th>
				<th></th>
				<th></th>
  		</tr>
  		<tr>
    			<td>Test Plan Name</td>
    			<td>Health Check</td>
    			<td>Machine name executed</td>
    			<td>VBPT-X1-110</td>
  		</tr>
  		<tr>
    			<td>Test Case title</td>
    			<td>Health Check on New Customer flow</td>
    			<td>Total Number of test case executed</td>
    			<td>5</td>
  		</tr>
  		<tr>
    			<td>Execution Start Date and time</td>
    			<td>8/5/2019, 10.00 AM</td>
    			<td>Total Number of test case Passed</td>
    			<td>5</td>
  		</tr>
  		<tr>
    			<td>Execution End Date and time</td>
    			<td>8/5/2019, 10.15 AM</td>
    			<td>Total Number of test case Failed</td>
    			<td>0</td>
  		</tr>
  		<tr>
    			<td>Total Execution time</td>
    			<td>15 Mins</td>
    			<td>Integration points verified</td>
    			<td>IDV, OFAC, Deposit, Order Check</td>
  		</tr>
  		<tr>
    			<td>Environment Executed</td>
    			<td>SIT</td>
    			<td>Browser Executed</td>
    			<td>Internet Explorer</td>
  		</tr>
		</table>
		<hr>
			<div id="piechart1" style="width:400px; height: 400px;float:left;display:inline-block;"></div>
			<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
			<script type="text/javascript">
				google.charts.load('current', {'packages':['corechart']});
				google.charts.setOnLoadCallback(drawChart1);
				function drawChart1() {
  					var data = google.visualization.arrayToDataTable([
  					['Status', 'Count'],
  					['Pass', 100],
  					['Fail', 30],
					]);
					var options = {legend: { position: 'none' },is3D: true};
					var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
					chart.draw(data, options);
				}
			</script>

			<div id="piechart2" style="width:320px; height: 300px;float:right;display:inline-block;"></div>
			<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
			<script type="text/javascript">
			google.charts.load('current', {'packages':['gauge']});
			google.charts.setOnLoadCallback(drawGauge);
			var gaugeOptions = {'min': 0, 'max': 300, 'redFrom': 181, 'redTo': 300, 'yellowFrom': 120, 'yellowTo': 180, 'greenFrom': 0, 'greenTo': 119, 'minorTicks': 5};
			var gauge;

			function drawGauge() {
			  gaugeData = new google.visualization.DataTable();
			  gaugeData.addColumn('number', '');
			  gaugeData.addRows(1);
			  gaugeData.setCell(0, 0, 130);
			  gauge = new google.visualization.Gauge(document.getElementById('piechart2'));
			  gauge.draw(gaugeData, gaugeOptions);
			}
			
			</script>
			<div id="barChart" style="display:inline-block;height: 400px;width:200px;display:inline-block;"></div>
			<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
			<script type="text/javascript">
				google.charts.load('current', {'packages':['bar']});
				google.charts.setOnLoadCallback(drawStuff);

				function drawStuff() {
				var data = new google.visualization.arrayToDataTable([
				['', 'Mins'],
				["IDV", 800],
				["OFAC", 300],
				["Deposit", 600],
				["OrderCheck", 100]
				]);
				var options = {
				width: 300,
				legend: { position: 'none' },
				axes: {
				y: {
				0: {  label: 'In Mins'}
				}
				},
				bar: { groupWidth: "50%" }
				};
				var chart = new google.charts.Bar(document.getElementById('barChart'));
				chart.draw(data, google.charts.Bar.convertOptions(options));
				};
			</script>
		<table id ="t02">
  		<tr>
    			<th width="10%"><font color="#17202a">Test Result (Pass/ Fail)</font></th>
    			<th width="15%"><font color="#17202a">Integration - Response time</font></th>
				<th width="5%"><font color="#17202a">Total execution time (in Mins)</font></th>	
  		</tr>
		<table id ="t01">
  		<tr>
    			<th><font color="#f4f6f7">Test Case #</font></th>
    			<th><font color="#f4f6f7">Test Case title</font></th>
				<th><font color="#f4f6f7">Expected Test Result</font></th>
				<th><font color="#f4f6f7">Actual Test Result from execution</font></th>
				<th><font color="#f4f6f7">Status</font></th>
				<th><font color="#f4f6f7">Comments</font></th>
  		</tr>
  		<tr>
    			<td>Test Case 1</td>
    			<td>Creating New Saving Account</td>
    			<td>Successful message should display </td>
    			<td>Successful message should display</td>
				<td>PASS</td>
				<td>Displayed as expected</td>
  		</tr>
  		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
				<td></td>
				<td></td>
  		</tr>
  		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
				<td></td>
				<td></td>
  		</tr>
  		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
				<td></td>
				<td></td>
  		</tr>
  		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
				<td></td>
				<td></td>
  		</tr>
  		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
				<td></td>
				<td></td>
  		</tr>
		</table1>
	</body>
</html>
2

Hi,

When you say ‘zoom’ I am assuming that you mean at different window width and different devices rather than just browsers zooming.

It seems your charts are a fixed pixel width and height and that means they won’t scale very well with window size or browser zoom. I am not familiar with google charts so the below code is probably the wrong way to make them fluid so I suggest you double check the documentation to see if there are easier ways to manage this.

I am using an intrinsic ratio method using percentage padding in order to scale the absolutely placed charts.

The code below is meant as a starting point for you to study and not a finished product as of course I couldn’t really know your intentions. the page will scale larger and smaller and within reasons fit on small devices (hence the table-wrap I added to allow your large table to scroll on mobiles without pushing the screen wide).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Health Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- No No No ...
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	Please don't stop user from scaling page 
-->

<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0;
}
body {
	padding:0 20px;
}
.wrap {
	max-width: 1500px;
	margin:auto;
	border-top:30px solid #2874a6;
}
.header {
	display:flex;
	padding:10px 0;
	align-items:center;
}
.logo {
	font-size:2rem;
	margin:0;
	padding:0 150px 0 0;
	color:#21618c;
	order:2;
	flex:1 0 0;
	text-align:center;
}
.details {
	width:100%;
	margin:0 0 20px;
	background:#85C1E9;
}
.details th, .details td {
	text-align: left;
	padding:2px 5px;
}
.table-wrap{
	width:100%;
 	overflow:auto;
	margin-bottom:25px;
}
#t01 {
	width: 100%;
	background-color: #f1f1c1;
	border: 1px solid black;
	border-collapse: collapse;
}
#t01 th,#t01 td {
	background-color: #2874a6;
	border: 1px solid black;
	padding: 15px;
	text-align:center;
	word-wrap:break-word;
}
#t01 th{color:#f4f6f7;}
#t01 td {background-color: #E5E8E8;}
/* charts*/
.charts {
	display:flex;
	justify-items:center;
	align-content:center;
	margin:25px 0;
	padding-bottom:10px;
}
.chart-wrap{flex:1 0 0;}
.chart-inner{
	position:relative;
	padding-top:37%;/* adjust percentage to make charts bigger or smaller*/
}
#piechart1, #piechart2, #barChart {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0px;
	display:flex;
	justify-content:center;
}
.result {
	text-align:center;
	margin:20px 0 0;
	font-weight:bold;
	color:#17202a
}
@media screen and (max-width:800px){
	.charts{flex-direction:column;max-width:500px;margin:0 auto;}
    .chart-wrap{padding-bottom:15px;border-bottom:1px dashed #666;margin-top:35px;}
	.chart-wrap:first-child{margin-top:0;}
	.chart-wrap:last-child{border-bottom:none;}
	.logo {font-size:1.5rem;margin:0 0 0 auto;padding:0;}
}
@media screen and (max-width:500px){
	.header{flex-wrap:wrap}
	.header > *{flex:1 0 100%;}
	.logo-img{max-width:150px;height:auto;margin:15px auto;display:block;}
}
</style>
</head>
<body>
<div class="wrap">
  <header class="header">
    <h1 class="logo">Health Check - Result</h1>
    <img src="https://via.placeholder.com/150x60" class="logo-img" alt="logo" width="150" height="60"> </header>
  <div class="table-wrap">
    <table class="details">
      <tr><!-- why is there no header ? -->
        <th>&nbsp;</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Test Plan Name</td>
        <td>Health Check</td>
        <td>Machine name executed</td>
        <td>VBPT-X1-110</td>
      </tr>
      <tr>
        <td>Test Case title</td>
        <td>Health Check on New Customer flow</td>
        <td>Total Number of test case executed</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Execution Start Date and time</td>
        <td>8/5/2019, 10.00 AM</td>
        <td>Total Number of test case Passed</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Execution End Date and time</td>
        <td>8/5/2019, 10.15 AM</td>
        <td>Total Number of test case Failed</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Total Execution time</td>
        <td>15 Mins</td>
        <td>Integration points verified</td>
        <td>IDV, OFAC, Deposit, Order Check</td>
      </tr>
      <tr>
        <td>Environment Executed</td>
        <td>SIT</td>
        <td>Browser Executed</td>
        <td>Internet Explorer</td>
      </tr>
    </table>
  </div>
  <hr>
  <div class="charts">
    <div class="chart-wrap">
      <div class="chart-inner">
        <div id="piechart1"></div>
      </div>
      <p class="result">Test Result (Pass/ Fail)</p>
    </div>
    <div class="chart-wrap">
      <div class="chart-inner">
        <div id="barChart"></div>
      </div>
      <p class="result">Integration - Response time</p>
    </div>
    <div class="chart-wrap">
      <div class="chart-inner">
        <div id="piechart2"></div>
      </div>
      <p class="result">Total execution time (in Mins)</p>
    </div>
  </div>
  <div class="table-wrap">
    <table id="t01">
      <tr>
        <th>Test Case</th>
        <th>Test Case title</th>
        <th>Expected Test Result</th>
        <th>Actual Test Result from execution</th>
        <th>Status</th>
        <th>Comments</th>
      </tr>
      <tr>
        <td>Test Case 1</td>
        <td>Creating New Saving Account</td>
        <td>Successful message should display </td>
        <td>Successful message should display</td>
        <td>PASS</td>
        <td>Displayed as expected</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</div>

<!-- lets move script to the end of the html to keep things neater --> 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script>

/* First example */
google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart1);

function drawChart1() {
    var data = google.visualization.arrayToDataTable([
        ['Status', 'Count'],
        ['Pass', 100],
        ['Fail', 30],
    ]);
    var options = {
        legend: {
            position: 'none'
        },
        is3D: true
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
    chart.draw(data, options);
}

/* second example */

google.charts.load('current', {
    'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawGauge);
var gaugeOptions = {
    'min': 0,
    'max': 300,
    'redFrom': 181,
    'redTo': 300,
    'yellowFrom': 120,
    'yellowTo': 180,
    'greenFrom': 0,
    'greenTo': 119,
    'minorTicks': 5
};
var gauge;

function drawGauge() {
    gaugeData = new google.visualization.DataTable();
    gaugeData.addColumn('number', '');
    gaugeData.addRows(1);
    gaugeData.setCell(0, 0, 130);
    gauge = new google.visualization.Gauge(document.getElementById('piechart2'));
    gauge.draw(gaugeData, gaugeOptions);
}

/* third example */
google.charts.load('current', {
    'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
        ['', 'Mins'],
        ["IDV", 800],
        ["OFAC", 300],
        ["Deposit", 600],
        ["OrderCheck", 100]
    ]);
    var options = {
        width: '100%',
        legend: {
            position: 'none'
        },
        axes: {
            y: {
                0: {
                    label: 'In Mins'
                }
            }
        },
        bar: {
            groupWidth: "50%"
        }
    };
    var chart = new google.charts.Bar(document.getElementById('barChart'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

// trigger resize when window size is changed
// this should probably be throttled
window.addEventListener("resize", function() {
    drawChart1();
    drawGauge();
    drawStuff();
}, false);

</script>
</body>
</html>

I removed some JS for the charts that didn’t seem to have any html in place and noticed you were loading the chart script multiple times. I also added a window resize function to redraw the charts when the page is resized otherwise they don’t get updated. If you need help with the JS then that’s a question for the JS forum as my JS is basic at best and you will get better help there :slight_smile:

Try not to mix old and new as you have font tags in there which were deprecated last century and should never be seen in a web page ever again.

I removed your body margins of 150px because on an iphone that would leave you 20px for your whole page content :slight_smile: It’s better towrap the page in a wrapper div and set a max-width and use margin:auto to center it. You don’t really want your page getting too wide unless you want to manage it in finer detail using more columns and a different layout. Text is only readable at modest line lengths.

Use media queries to adjust the layout when things don’t seem to fit and make better use of space by either reducing columns for small screen or adding columns for larger screens. use your desktop and open the browsers window as wide as it will go and then make the page smaller and smaller and when elements get squashed too much then throw in a media query at that point and make things better. Also use the devtools in Chrome to see what the page will look like on multiple devices (although just resizing the window is a pretty good indication). Note that you never want to see a horizontal scrollbar on the viewport as that is the bane of smaller devices and will break their viewports.

Lastly do not disable user zoom in the viewport meta tag as that is a sin unless yo have built an app with in-page zoom controls. the one thing I always do on mobile is pinch and zoom so I can read text more easily.

Hope that the above gets you started in the right direction :slight_smile:

4 Likes
3

Hi PaulOB,

You made my day . Your guess is correct . I was looking for the same format which you have replied . Thank you so much PaulOB . I am completely new to HTML . I have created all my code by checking online . I know that is not correct format.

Once again thanks for giving valuable time to help me . I don’t have words to say Paul . Your simply superb .

4

image
image1343×666 40.9 KB

Everything is perfect if i open it through Chrome . But it is not working in IE browser

5

Hi,

I don’t really fully support IE11 these days especially when using flex as IE11 has loads of bugs (Edge is ok).

However this is quite an easy fix and the problem is that IE11 gets flex:1 0 0 wrong but it works when you use flex:1 0 0% for some perverse reason.

Therefore change the 2 flex:1 0 0 rules in the code to have a percent unit on the last zero value.

e.g.

.logo {
	font-size:2rem;
	margin:0;
	padding:0 150px 0 0;
	color:#21618c;
	order:2;
	flex:1 0 0%;
	text-align:center;
}

.chart-wrap{flex:1 0 0%;}

IE11 should now play ball as best it can :slight_smile:

2 Likes
6

That was awesome…Now its working perfect…Thanks PaulOB for quick response .

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.