Merge pull request #407 from martinRenou/improve_toolbar_positionning

Improve toolbar positioning

Author: martinRenou

src/mpl_widget.ts

@@ -397,10 +397,10 @@ export class MPLCanvasView extends DOMWidgetView {
         window.addEventListener('mousemove', this._resize_event);
         window.addEventListener('mouseup', this._stop_resize_event);
 
-        this.figure.addEventListener('mouseenter', () => {
+        this.el.addEventListener('mouseenter', () => {
             this.toolbar_view.fade_in();
         });
-        this.figure.addEventListener('mouseleave', () => {
+        this.el.addEventListener('mouseleave', () => {
             this.toolbar_view.fade_out();
         });
 

src/toolbar_widget.ts

@@ -113,31 +113,31 @@ export class ToolbarView extends DOMWidgetView {
             this.toolbar.classList.remove('widget-hbox');
             this.toolbar.classList.add('widget-vbox');
 
-            this.el.style.top = '3%';
+            this.el.style.top = '3px';
             this.el.style.bottom = 'auto';
 
             if (position === 'left') {
-                this.el.style.left = '3%';
+                this.el.style.left = '3px';
                 this.el.style.right = 'auto';
             } else {
                 this.el.style.left = 'auto';
-                this.el.style.right = '3%';
+                this.el.style.right = '3px';
             }
         } else {
             this.el.classList.add('widget-hbox');
             this.el.classList.remove('widget-vbox');
             this.toolbar.classList.add('widget-hbox');
             this.toolbar.classList.remove('widget-vbox');
 
-            this.el.style.right = '3%';
+            this.el.style.right = '3px';
             this.el.style.left = 'auto';
 
             if (position === 'top') {
-                this.el.style.top = '3%';
+                this.el.style.top = '3px';
                 this.el.style.bottom = 'auto';
             } else {
                 this.el.style.top = 'auto';
-                this.el.style.bottom = '3%';
+                this.el.style.bottom = '3px';
             }
         }
     }