How to enable responsiveness to Plotly-Dash app within an Iframe? - html

Question

I have created a dash app, that is hosted to serve on the Heroku server. The dash app is completely responsive. If I access it on a mobile, iPad, desktop,.. the plot size auto-scales and fits the width of the window. This is perfect. However, embedding this dash app URL in an iframe of my website, the plot's responsiveness is lost. It does not autoscale to fit the width of the iframe.
How to ensure that the iframe and the plot responsively auto-scales to fit the width of the window?
My dash app: https://isb-hpi.herokuapp.com/
My iframe code:
<div class="iframe-container">
<iframe class="responsive-iframe" src="https://isb-hpi.herokuapp.com/"></iframe>
</div>
My CSS:
.iframe-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 45%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
code to construct plot:
from warnings import showwarning
import pandas as pd
import numpy as np
import os
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
config = {'responsive': True}
figq1 = px.line(dfq1, x="month", y="final_Index", color="Bedroom",template='presentation', line_shape='spline', labels={"Bedroom": "Type"}, category_orders={"Bedroom":['1bhk', '2bhk', '3bhk']})
figq1.update_traces(line=dict(width=1))
figq1.add_trace(
go.Scatter(
x=dfqa1.month,
y=dfqa1.final_Index,
mode="lines",
line=go.scatter.Line(color="gray", width=2),
showlegend=True, name='all')
)
figq1.update_layout(width=750,height=500, autosize=True)
figq1.update_layout(
xaxis=dict(
rangeslider=dict(
visible=True,
thickness=.05
),
type="date"
)
)
figq1.update_layout(
xaxis_title="Time", yaxis_title="final_Index",legend_title="",
font=dict(
family="Courier New, monospace",
size=11,
color="RebeccaPurple"
), legend=dict(
orientation="h",
yanchor="bottom",
y=1.05,
xanchor="right",
x=1
)
)
figq1.update_yaxes(
title=' '
)
figq1.layout.legend.itemsizing = 'constant'
figq1.layout._config= config
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
server=app.server
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
server=app.server
tabs_styles = {'zIndex': 99, 'display': 'inlineBlock', 'height': '4vh', 'width': '12vw',
'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
'border': 'grey', 'border-radius': '4px'}
tab_style = {
"background": "#323130",
'text-transform': 'uppercase',
'color': 'white',
'border': '#A9A9A9',
'font-size': '9px',
'font-weight': 600,
'align-items': 'center',
'justify-content': 'center',
'border-radius': '4px',
'padding':'6px'
}
tab_selected_style = {
"background": "#A9A9A9",
'text-transform': 'uppercase',
'color': 'white',
'font-size': '9px',
'font-weight': 600,
'align-items': 'center',
'justify-content': 'center',
'border-radius': '4px',
'padding':'6px'
}
app.layout = html.Div([
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='India', value='tab-1',style=tab_style, selected_style=tab_selected_style),
html.Div(id='tabs-example-content')
])
#app.callback(Output('tabs-example-content', 'children'),
Input('tabs-example', 'value'))
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.Div([
html.Div([
dcc.Graph(id='g2', figure=figq1)
], className="row", style={
'width': 750,
"display": "block",
"margin-left": "auto",
"margin-right": "auto",
}),
], className="row")
])
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False)
Edit:

Answer 1

When building dash apps with responsive layouts,
always use:
config = {'responsive': True}
autosize=True
Never set the width and height explicitly as you can see in my code to construct the plot.