Improve CSS positioning

matplotlib · Dec 15, 2021 · d796ef5 · d796ef5
1 parent a1a577f
commit d796ef5
Show file tree

Hide file tree

Showing 15 changed files with 8 additions and 8 deletions.
diff --git a/src/mpl_widget.ts b/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();
         });
 

diff --git a/src/toolbar_widget.ts b/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';
             }
         }
     }

diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_10.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_10.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_11.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_11.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_12.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_12.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_13.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_13.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_14.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_14.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_2.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_2.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_3.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_3.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_4.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_4.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_5.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_5.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_6.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_6.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_7.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_7.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_8.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_8.png
diff --git a/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_9.png b/ui-tests/reference-output/screenshots/ipympl_update_ipynb_cell_9.png