[11.0][FIX] web_widget_bokeh_chart: fix grahs expanding outside the container element.

web_widget_bokeh_chart/__manifest__.py

@@ -7,7 +7,7 @@
     "summary": "This widget allows to display charts using Bokeh library.",
     "author": "Eficent, "
               "Odoo Community Association (OCA)",
-    "version": "11.0.1.0.0",
+    "version": "11.0.1.1.0",
     "website": "https://github.com/OCA/web",
     "depends": ["web"],
     "data": [

web_widget_bokeh_chart/static/src/css/custom-bokeh.css

@@ -1,4 +0,0 @@
-.bk-root {
-    /* Overriding this styling option Odoo menu is now displayed on top of bokeh graphs */
-  position: sticky;
-}

web_widget_bokeh_chart/static/src/less/custom-bokeh.less

@@ -0,0 +1,34 @@
+.bk-root {
+    /* Overriding this styling option Odoo menu is now displayed on top of bokeh graphs */
+    z-index: 0;
+
+    /* The following !important sentences are needed to override inline styles hardcoded by the bokeh library.
+    This way the graphs are always displayed inside their defined container in the Qweb views.
+    */
+    .bk-layout-stretch_both {
+        height: inherit !important;
+        width: inherit !important;
+    }
+
+    .bk-plot-wrapper {
+        height: inherit !important;
+        width: inherit !important;
+    }
+
+    // forces the toolbar to be always at the right of the plot
+    .bk-toolbar-wrapper {
+        height: inherit !important;
+        float: right !important;
+        left: 0 !important;
+    }
+
+    .bk-canvas-wrapper {
+        height: inherit !important;
+        width: inherit !important;
+    }
+
+    .bk-canvas{
+        height: inherit !important;
+        width: inherit !important;
+    }
+}

web_widget_bokeh_chart/views/web_widget_bokeh_chart.xml

@@ -6,7 +6,7 @@
         <xpath expr="." position="inside">
             <link rel="stylesheet" href="/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-0.12.7.css"/>
             <link rel="stylesheet" href="/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-widgets-0.12.7.css"/>
-            <link rel="stylesheet" href="/web_widget_bokeh_chart/static/src/css/custom-bokeh.css"/>
+            <link rel="stylesheet" href="/web_widget_bokeh_chart/static/src/less/custom-bokeh.less"/>
             <script type="text/javascript" src="/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-0.12.7.js"/>
             <script type="text/javascript" src="/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-widgets-0.12.7.js"/>
             <script type="text/javascript" src="/web_widget_bokeh_chart/static/src/js/web_widget_bokeh_chart.js"/>