diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index f460a9448..e450b957b 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -28,6 +28,7 @@ "/packages/docs/sandboxes/rendermode-dockview", "/packages/docs/sandboxes/resize-dockview", "/packages/docs/sandboxes/resizecontainer-dockview", + "/packages/docs/sandboxes/scrollbars-dockview", "/packages/docs/sandboxes/simple-dockview", "/packages/docs/sandboxes/simple-gridview", "/packages/docs/sandboxes/simple-paneview", @@ -40,4 +41,4 @@ "/packages/docs/sandboxes/javascript/vanilla-dockview" ], "node": "18" -} +} \ No newline at end of file diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss index d1c10568a..dc8b46a8d 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss @@ -17,7 +17,7 @@ > .content-container { flex-grow: 1; - overflow: hidden; + min-height: 0; outline: none; } } diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 0472c1e1a..e31864d21 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -31,6 +31,7 @@ import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app'; import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app'; import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app'; import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app'; +import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app'; import { DocRef } from '@site/src/components/ui/reference/docRef'; @@ -196,6 +197,22 @@ If you refresh the page you should notice your layout is loaded as you left it. react={DockviewPersistance} /> +## Scrollbars + +Scrollbars will appear if the contents of your view has a fixed height. If you are using a relative height such +as *100%* you will need to define an inner container with the appropiate `overflow` value to allow scrollbars to appear. + +The following container three views: +- **Panel 1**: Sets `height: 100%` and no scrollbar appears even, the content is clipped. +- **Panel 2**: Sets `height: 2000px` and a scrollbar does appear since a fixed height has been used. +- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars. + + + + ## Resizing ### Panel Resizing diff --git a/packages/docs/sandboxes/scrollbars-dockview/package.json b/packages/docs/sandboxes/scrollbars-dockview/package.json new file mode 100644 index 000000000..6d2ffca5d --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/package.json @@ -0,0 +1,34 @@ +{ + "name": "scrollbars-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "uuid": "^9.0.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "@types/uuid": "^9.0.0", + "typescript": "^4.9.5", + "react-scripts": "*" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/scrollbars-dockview/public/index.html b/packages/docs/sandboxes/scrollbars-dockview/public/index.html new file mode 100644 index 000000000..5a4850c1d --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/public/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/app.scss b/packages/docs/sandboxes/scrollbars-dockview/src/app.scss new file mode 100644 index 000000000..e03cd2acf --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/src/app.scss @@ -0,0 +1,16 @@ +.group-control { + .action { + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + font-size: 18px; + cursor: pointer; + + &:hover { + border-radius: 2px; + background-color: var(--dv-icon-hover-background-color); + } + } +} diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx b/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx new file mode 100644 index 000000000..bece60098 --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx @@ -0,0 +1,77 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from 'dockview'; +import './app.scss'; + +const TEXT = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; + +const components = { + fixedHeightContainer: (props: IDockviewPanelProps<{ title: string }>) => { + return ( +
+ {[TEXT, '\n\n'].join('').repeat(20)} +
+ ); + }, + overflowContainer: (props: IDockviewPanelProps<{ title: string }>) => { + return ( +
+ {[TEXT, '\n\n'].join('').repeat(20)} +
+ ); + }, + userDefinedOverflowContainer: ( + props: IDockviewPanelProps<{ title: string }> + ) => { + return ( +
+
+ {[TEXT, '\n\n'].join('').repeat(20)} +
+
+ ); + }, +}; + +const DockviewComponent = (props: { theme?: string }) => { + const onReady = (event: DockviewReadyEvent) => { + event.api.addPanel({ + id: 'panel_1', + component: 'fixedHeightContainer', + title: 'Panel 1', + }); + + event.api.addPanel({ + id: 'panel_2', + component: 'overflowContainer', + title: 'Panel 2', + position: { direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_3', + component: 'userDefinedOverflowContainer', + title: 'Panel 3', + position: { direction: 'right' }, + }); + }; + + return ( + + ); +}; + +export default DockviewComponent; diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx b/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/styles.css b/packages/docs/sandboxes/scrollbars-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json b/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true + } +}