diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 5edecfcca..c0c8cbffa 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -66,6 +66,11 @@ parent.insertBefore(resizeHandle, rightCol); resizeHandle.addEventListener('mousedown', (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + + document.body.classList.add('resizing'); + R.tracking = true; R.parent = parent; R.parentWidth = parent.offsetWidth; @@ -75,20 +80,37 @@ R.screenX = evt.screenX; }); - resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS); + resizeHandle.addEventListener('dblclick', (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + + parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS; + }); afterResize(parent); } window.addEventListener('mousemove', (evt) => { if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); + const delta = R.screenX - evt.screenX; const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); setLeftColGridTemplate(R.parent, leftColWidth); } }); - window.addEventListener('mouseup', () => R.tracking = false); + window.addEventListener('mouseup', (evt) => { + if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); + + R.tracking = false; + + document.body.classList.remove('resizing'); + } + }); window.addEventListener('resize', () => { diff --git a/style.css b/style.css index 4e9cdc8f8..537bc2d2c 100644 --- a/style.css +++ b/style.css @@ -1061,6 +1061,13 @@ div.accordions > div.input-accordion.input-accordion-open{ top: 0.5em; } +body.resizing { + cursor: col-resize !important; +} + +body.resizing :not(.resize-handle) { + pointer-events: none !important; +} .resize-handle { position: relative;