How to make plotly graph fit to div in HTML?
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have created a plotly graph in python and would like to display it on my HTML page. The problem is that the graph does not seem to fit the div propertly. Here is what I mean:
I would like it to scale based on the screen size to fit into the first column, but no matter what i do in iframe, the size of the graph itsesf remains constant. How can that be fixed?
P.S. I am unable to change the python code, so I am looking for the solution in HTML, but it would be interesting to hear how to fix this in the future in python
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class=”row”>
<div class=”column” style=”background-color:#aaa;”>
<iframe id=”igraph” scrolling=”no” style=”display: block; width: 100%; height: 100%” seamless=”seamless” src=”report_graph_2.html”></iframe>
</div>
<div class=”column” style=”background-color:#bbb;”>
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
And here is a full website if you need to see the code for the plotly graph.
أضف إجابة