Issue
I'm trying to place the line chart inside the div, but it still leaks below the div.
I've already changed the width and top in the options, but it doesn't seem to have any effect.
How can I fix those graphics that are outside the div to stay inside?
.containerGeral {
display: grid;
grid-template-columns: repeat(6, 540px); /* The width */
grid-auto-rows: 250px; /* The height */
grid-auto-flow: dense; /*This is the important property*/
/* The margin */
grid-gap: 20px;
padding: 10px;
}
.containerGeral .blocks {
border-radius: 10px;
background-color: #2E5173;
}
.containerGeral .blocks::before {
content: '';
display: block;
width: 100%;
height: 100%;
}
.big {
grid-column: span 3;
/* Take twice the width*/
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="test">
</div>
<div class="containerGeral">
</div>
<script>
function draw(id) {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
var options = {
title: 'title',
curveType: 'function',
colors: ['#0409BA', '#00930A'],
lineWidth: 3,
vAxis: {
viewWindow: {
min: 0,
max: 100
}
},
legend: {
position: 'bottom'
},
top: '0',
width: '100%',
heigth: '30'
};
var chart = new google.visualization.LineChart(document.getElementById(id));
var data = google.visualization.arrayToDataTable([
['x', 'y'],
[0, 0],
[1, 1],
[2, 3],
[3, 7],
[4, 15],
[5, 31]
]);
chart.draw(data, options);
});
}
for (let i = 0; i < 16; i++) {
if (i % 6 == 0 && i > 0) {
var d1 = $('<div class="big blocks" id="a' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
var d2 = $('<div class="big blocks" id="b' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
continue
}
$('<div class="blocks" id="c' + i + '"></div>').appendTo('.containerGeral')
draw('c' + i)
}
</script>
</body>
</html>Solution
Remove the pseudo element ::before
.containerGeral .blocks::before {
content: '';
display: block;
width: 100%;
height: 100%;
}
Here is a snippet
function draw(id) {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
var options = {
title: 'title',
curveType: 'function',
colors: ['#0409BA', '#00930A'],
lineWidth: 3,
vAxis: {
viewWindow: {
min: 0,
max: 100
}
},
legend: {
position: 'bottom'
},
top: '0',
width: '100%',
heigth: '30'
};
var chart = new google.visualization.LineChart(document.getElementById(id));
var data = google.visualization.arrayToDataTable([
['x', 'y'],
[0, 0],
[1, 1],
[2, 3],
[3, 7],
[4, 15],
[5, 31]
]);
chart.draw(data, options);
});
}
for (let i = 0; i < 16; i++) {
if (i % 6 == 0 && i > 0) {
var d1 = $('<div class="big blocks" id="a' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
var d2 = $('<div class="big blocks" id="b' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
continue
}
$('<div class="blocks" id="c' + i + '"></div>').appendTo('.containerGeral')
draw('c' + i)
}.containerGeral {
display: grid;
grid-template-columns: repeat(6, 540px);
/* The width */
grid-auto-rows: 250px;
/* The height */
grid-auto-flow: dense;
/*This is the important property*/
/* The margin */
grid-gap: 20px;
padding: 10px;
}
.containerGeral .blocks {
border-radius: 10px;
background-color: #2E5173;
}
.big {
grid-column: span 3;
/* Take twice the width*/
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
</div>
<div class="containerGeral">
</div>Answered By - dippas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.