0
I need help adjusting two pie Chart charts at the left and right ends of a header. Every time I zoom in (Ctrl and +) they mismatch. I set the css to look adjusted, but as soon as I zoom in, everything gets ugly. Thanks for your help. Follow the code:
angular.module('App', ['nvd3']).controller('Ctrl', function($scope){
$scope.options = {
chart: {
type: 'pieChart',
height: 300,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
showLegend: false
}
};
$scope.data = [
{key: "One", y: 5},
{key: "Two", y: 2},
{key: "Three", y: 9},
{key: "Four", y: 7},
{key: "Five", y: 4},
];
})body{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
header {
display:block;
position:fixed;
top:0;
left:9%;
width:80%;
height: 35%;
background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#bde8fc)) no-repeat;
margin: auto;
padding: 12px;
border: 1px solid black;
border-collapse: collapse;
}
.opts1 {
position: absolute;
margin-left: 1%;
margin-top: -50px;
}
.opts2 {
position: absolute;
margin-left: 70%;
margin-top: -50px;
}
h3 {
margin-top: -40px;
margin-left: 75px;
}<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="App" ng-controller="Ctrl">
<header>
<div class="opts1">
<nvd3 options="options" data="data"></nvd3>
<h3>Features Trends</h3>
</div>
<div class="opts2">
<nvd3 options="options" data="data"></nvd3>
<h3>Features Trends</h3>
</div>
</header>
</body>
This happens because your Css has values in % and in PX so when you use the zoom it recalculates some elements and others do not, ai breaks the layout
– hugocsl
Thanks for the explanations, @hugocsl. Could you just show an example of how I could solve? I am new to Web programming and am learning everything on demand. Grateful!
– Antonio Braz Finizola
Face notice that here
.opts2 { position: absolute; margin-left: 70%; margin-top: -50px; }vc uses two values for margin, one in PX and the other in %, probably what is in % will give problem when you use Zoom, vc will have to find for it a value in PX that is equivalent to 70%, so you will not have problems. Then you do it where you need it most. Or you do it backwards, which may be more appropriate for responsiveness. Put % where PX etc...– hugocsl