Use display: block for canvas elements and fix layout issues.

Author: SylvainCorlay

js/src/mpl_widget.css

@@ -1,19 +1,27 @@
-.ipympl_widget {
+.jupyter-matplotlib {
   height: 500px;
+  flex: 1 1 auto;
 }
 
-.ipympl_button {
+/* Toolbar */
+
+.jupyter-matplotlib-button {
   width: 34px; /* calc(var(--jp-widgets-inline-width-tiny) / 2 - 2px) */
   padding: 0;
 }
 
-.ipympl_figure {
+/* Figure */
+
+.jupyter-matplotlib-figure {
   width: 100%;
   height: 100%;
 }
 
-.ipympl_canvas_div {
+.jupyter-matplotlib-canvas_div {
   margin: 2px;
-  flex-grow: 1; /* Take all the remaining space after the header and footer is displayed */
-  overflow: hidden;
+  flex: 1 1 auto;
+}
+
+.jupyter-matplotlib-canvas_div:focus {
+  outline: 1px solid; /* 1px solid var(--jp-widgets-input-focus-border-color); */
 }

js/src/mpl_widget.js

@@ -38,8 +38,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
 
         this.figure = document.createElement('div');
         this.figure.addEventListener('remove', this.close.bind(this));
-        this.figure.classList = 'ipympl_figure jupyter-widgets widget-container widget-box widget-vbox';
-        this.el.appendChild(this.figure);
+        this.figure.classList = 'jupyter-matplotlib-figure jupyter-widgets widget-container widget-box widget-vbox';
 
         this._init_header();
         this._init_canvas();
@@ -87,7 +86,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
     update_toolbar_position: function() {
         var toolbar_position = this.model.get('toolbar_position');
         if (toolbar_position == 'top' || toolbar_position == 'bottom') {
-            this.el.classList = 'jupyter-widgets widget-container widget-box widget-vbox ipympl_widget';
+            this.el.classList = 'jupyter-widgets widget-container widget-box widget-vbox jupyter-matplotlib';
             this.model.get('toolbar').set('orientation', 'horizontal');
 
             this.clear();
@@ -100,7 +99,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
                 this.el.appendChild(this.toolbar_view.el);
             }
         } else {
-            this.el.classList = 'jupyter-widgets widget-container widget-box widget-hbox ipympl_widget';
+            this.el.classList = 'jupyter-widgets widget-container widget-box widget-hbox jupyter-matplotlib';
             this.model.get('toolbar').set('orientation', 'vertical');
 
             this.clear();
@@ -132,7 +131,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
         var canvas_div = this.canvas_div = document.createElement('div');
         canvas_div.style.position = 'relative';
         canvas_div.style.clear = 'both';
-        canvas_div.classList = 'jupyter-widgets ipympl_canvas_div';
+        canvas_div.classList = 'jupyter-widgets jupyter-matplotlib-canvas_div';
 
         canvas_div.addEventListener('keydown', this.key_event('key_press'));
         canvas_div.addEventListener('keyup', this.key_event('key_release'));
@@ -141,6 +140,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
         this.figure.appendChild(canvas_div);
 
         var canvas = this.canvas = document.createElement('canvas');
+        canvas.style.display = 'block';
         canvas.style.left = 0;
         canvas.style.top = 0;
         canvas.style.zIndex = 0;
@@ -157,6 +157,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
         this.ratio = (window.devicePixelRatio || 1) / backingStore;
 
         var rubberband_canvas = this.rubberband_canvas = document.createElement('canvas');
+        rubberband_canvas.style.display = 'block';
         rubberband_canvas.style.position = 'absolute';
         rubberband_canvas.style.left = 0;
         rubberband_canvas.style.top = 0;

js/src/toolbar_widget.js

@@ -21,10 +21,9 @@ var ToolbarModel = widgets.DOMWidgetModel.extend({
 
 var ToolbarView = widgets.DOMWidgetView.extend({
     render: function() {
+        this.el.classList = 'jupyter-widgets jupyter-matplotlib-toolbar';
+        this.el.classList.add('widget-container', 'widget-box');
         this.create_toolbar();
-
-        this.el.appendChild(this.toolbar_container);
-
         this.model_events();
     },
 
@@ -33,11 +32,9 @@ var ToolbarView = widgets.DOMWidgetView.extend({
 
         this.current_action = '';
 
-        this.toolbar_container = document.createElement('div');
-        this.toolbar_container.classList = this.get_container_class();
         this.toggle_button = document.createElement('button');
 
-        this.toggle_button.classList = 'ipympl_button jupyter-widgets jupyter-button';
+        this.toggle_button.classList = 'jupyter-matplotlib-button jupyter-widgets jupyter-button';
         this.toggle_button.setAttribute('href', '#');
         this.toggle_button.setAttribute('title', 'Toggle Interaction');
         this.toggle_button.style.outline = 'none';
@@ -47,12 +44,10 @@ var ToolbarView = widgets.DOMWidgetView.extend({
         icon.classList = 'center fa fa-bars';
         this.toggle_button.appendChild(icon);
 
-        this.toolbar_container.appendChild(this.toggle_button);
-
+        this.el.appendChild(this.toggle_button);
         this.toolbar = document.createElement('div');
-        this.toolbar.classList = this.get_container_class();
-        this.toolbar_container.appendChild(this.toolbar);
-
+        this.toolbar.classList = 'widget-container widget-box';
+        this.el.appendChild(this.toolbar);
         this.buttons = [this.toggle_button];
 
         for(var toolbar_ind in toolbar_items) {
@@ -63,7 +58,7 @@ var ToolbarView = widgets.DOMWidgetView.extend({
             if (!name) { continue; };
 
             var button = document.createElement('button');
-            button.classList = 'ipympl_button jupyter-widgets jupyter-button';
+            button.classList = 'jupyter-matplotlib-button jupyter-widgets jupyter-button';
             button.setAttribute('href', '#');
             button.setAttribute('title', tooltip);
             button.style.outline = 'none';
@@ -78,15 +73,19 @@ var ToolbarView = widgets.DOMWidgetView.extend({
             this.toolbar.appendChild(button);
         }
 
+        this.set_orientation(this.el);
+        this.set_orientation(this.toolbar);
         this.set_buttons_style();
     },
 
-    get_container_class: function() {
+    set_orientation: function(el) {
         var orientation = this.model.get('orientation');
         if (orientation == 'vertical') {
-            return 'jupyter-widgets widget-container widget-box widget-vbox';
+            el.classList.remove('widget-hbox');
+            el.classList.add('widget-vbox');
         } else {
-            return 'jupyter-widgets widget-container widget-box widget-hbox';
+            el.classList.add('widget-hbox');
+            el.classList.remove('widget-vbox');
         }
     },
 
@@ -159,8 +158,8 @@ var ToolbarView = widgets.DOMWidgetView.extend({
     },
 
     update_orientation: function() {
-        this.toolbar_container.classList = this.get_container_class();
-        this.toolbar.classList = this.get_container_class();
+        this.set_orientation(this.el);
+        this.set_orientation(this.toolbar);
     }
 });