Make the first allotment pane scroll

Question

I have made a draggable split panel by https://github.com/johnwalley/allotment.

At the moment, when we drag up the split bar, the first allotment pane does not scroll. I would like to scroll the first allotment pane whenever we move up the split bar. Does anyone know how to do that?

https://codesandbox.io/s/reset-forked-u6qf4p?file=/src/App.js

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        <Allotment
          vertical
          onChange={this.handleChangeAllotment}
          ref={this.myRef}
        >
          <Allotment.Pane>
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={20}>
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}

0stone0 · Accepted Answer · 2023-03-21T10:41:12.500

1

From the Allotment documentation

My content is larger than the containing pane. How can I let the user scroll?

The simplest approach is to place your content inside a new div with width and height 100% and overflow auto.
This div will have the same dimensions as the pane it's inside and if its content overflows the browser will provide scrolling behaviour.

This can be implemented as follows:

<Allotment.Pane>
    <div style={{ overflowY: "auto", height: "100%" }}>
        long <br /> long <br /> long <br />
        long <br /> long <br /> long <br />
        long <br /> long <br /> long <br />
        long <br /> long <br /> long <br />
    </div>
</Allotment.Pane>

Which makes the pane scrollable if the length is to large.

_{Tip: If you need this multiple times, consider creating a custom component that will return your content wrapped in a <div> and <Allotment.Pane>}

Updated Snippet:

Screen recording of scrollable element:
https://www.kapwing.com/videos/641989933c5dc001fa96500c

edited Mar 21 '23 at 10:41

answered Mar 20 '23 at 17:12

0stone0

34,288
4
39
64

Thank you. I don't see the scroll bar in the first allotment pane in your codesandbox. – SoftTimur Mar 20 '23 at 17:29
It's scrollable tho, the bar might be hidden due to browser settings or CSS. Please check [this post](https://stackoverflow.com/questions/4050076/how-to-always-show-the-vertical-scrollbar-in-a-browser) about `auto` vs `scroll` value on `overflow`. You probably can use that to always show the bar. – 0stone0 Mar 20 '23 at 17:30
I'm using Chrome, and I cannot scroll the first allotment pane no matter how small it is. – SoftTimur Mar 20 '23 at 17:31
Try changing `auto` to `scroll`. – 0stone0 Mar 20 '23 at 17:32
changing `auto` to `scroll` still does not work. – SoftTimur Mar 20 '23 at 17:35
That might be a browser issue, please try another one. I;ve added a recording. Please check. – 0stone0 Mar 20 '23 at 17:40
1

It worked for me. I just had some thoughts. Thank you. – SoftTimur Mar 21 '23 at 14:57

Make the first allotment pane scroll

1 Answers1

My content is larger than the containing pane. How can I let the user scroll?