Made iframe in template be responsive

Mark Gibbs · Mark Gibbs · commit 2f0d77b4a1ef · 2018-05-11T11:23:41.000-07:00
diff --git a/demo/demo/templates/index.html b/demo/demo/templates/index.html
@@ -3,15 +3,15 @@
 {%load plotly_dash%}
   <title>Simple stuff</title>
 <body>
-  <div>
+  <div width="300">
     Content here
     {%plotly_item "simpleexample-1"%}
   </div>
   <div>
     Content here
     {%plotly_item "SimpleExample"%}
   </div>
-  <div>
+  <div width="800">
     Content here
     {%plotly_item "Ex2"%}
   </div>
diff --git a/django_plotly_dash/templates/django_plotly_dash/plotly_item.html b/django_plotly_dash/templates/django_plotly_dash/plotly_item.html
@@ -1,3 +1,3 @@
-<div>
-  <iframe src="{{app.base_url}}"></iframe>
+<div style="{{dstyle}}">
+  <iframe src="{{app.base_url}}" style="{{istyle}}"frameborder="{{fbs}}"></iframe>
 </div>
diff --git a/django_plotly_dash/templatetags/dexy.py b/django_plotly_dash/templatetags/dexy.py
diff --git a/django_plotly_dash/templatetags/plotly_dash.py b/django_plotly_dash/templatetags/plotly_dash.py
@@ -5,7 +5,24 @@
 from django_plotly_dash.models import DashApp
 
 @register.inclusion_tag("django_plotly_dash/plotly_item.html", takes_context=True)
-def plotly_item(context, app_name):
+def plotly_item(context, app_name, ratio=0.1, use_frameborder=False):
+
+    fbs = use_frameborder and '1' or '0'
+
+    dstyle = """
+    position: relative;
+    padding-bottom: %s%%;
+    height: 0;
+    overflow:hidden;
+    """ % (ratio*100)
+
+    istyle = """
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    """
 
     app = DashApp.get_app_instance(app_name)
 
